CIS111 University of Michigan Minor Web Application Project

Question Description

This is a CS project, only need to work question 2, 3, 4.

sumOfPDivs.html, sumOfPDivs.css and sumOfPDivs.js. This is an exercise in Client-Side JavaScript: you will need an .html file, a .ccs file, and a .js file. You’ll create a minor web application. A) In Atom create a file in your p5 folder named sumOfPDivs.html. It should be a minimal html page. You’ll find an example of a minimal html page under week 8 on Canvas. It shows what your sumOfPDivs.html file should be. B) In Atom create a second file in your p5 folder named sumOfPDivs.css. You’ll find an example of this file under week 8 on Canvas. It can serve as your starting place for formatting/styling aspects of your web application. Be sure that there is a link to this file in your html. C) Create a third file called sumOfPDivs.js that will contain all the JavaScript code, and use a script element in the html page to connect sumOfPDivs.html to sumOfPDivs.js.

Unformatted Attachment Preview

CIS 111 projects and labs provide hands-on practice in coding and web development using the technologies used in current web applications. In the 21st century, every business– from fashion to finance– is a tech company. Every company has a web presence, and many have smart phone apps. Coding and web dev, therefore, are high-demand skills for every job, and differentiate you from most people in the job market. All employers rank STEM skills very highly. By completing this project you will practice skills that are essential not only to your success in this course, but will also contribute to your academic success at the UO, and in your professional life after graduation. For best results, solve the following problems in order. This project will be discussed in detail in class. Be sure to use the Help Hours if you get stuck on a problem. 1. [30 pts] Files from your Week 8 Lab. A) In your week 8 lab, you created files named labweek-8.html and lab-week-8.js. The completed files should be in your p5 folder on the server. Be sure to test your code on the server in Chrome. 2. [35 pts] sumOfPDivs.html, sumOfPDivs.css and sumOfPDivs.js. This is an exercise in Client-Side JavaScript: you will need an .html file, a .ccs file, and a .js file. You’ll create a minor web application. A) In Atom create a file in your p5 folder named sumOfPDivs.html. It should be a minimal html page. You’ll find an example of a minimal html page under week 8 on Canvas. It shows what your sumOfPDivs.html file should be. B) In Atom create a second file in your p5 folder named sumOfPDivs.css. You’ll find an example of this file under week 8 on Canvas. It can serve as your starting place for formatting/styling aspects of your web application. Be sure that there is a link to this file in your html. C) Create a third file called sumOfPDivs.js that will contain all the JavaScript code, and use a script element in the html page to connect sumOfPDivs.html to sumOfPDivs.js. D) Using JavaScript, add the text content, a textarea box, and a click button as shown in the following figure. You’ll want to review lab 8, the ch26-2.zip example and the “areaOfCircle Web Application.pdf” example on Canvas as to how this can be done. For instance these examples show how to use the createElement, appendChild, and querySelector methods. Be sure these html elements are created using JavaScript. Do not create them in your html document. The purpose of this exercise is to learn how to use JavaScript rather than HTML to create them. That is, your HTML file should remain a minimal html file. The styling, such as font sizes and coloring, does not have to be exacting as shown in the figure below. Your JavaScript code should be modularized. Be sure that your logic is broken up into at least 4 or 5 functions. See the file on Canvas called “areaOfCircle Web Application.pdf” for an example of how your logic could be modularized. E) Copy a properly working version of your sumOfProperDivisors function from Project 3, and paste it into sumOfPDivs.js, near the top of the file. Following this function, define an onclick handler that handles the onclick event. F) Finally, add the code to register the event handler, at the bottom of the .js file. G) The completed web app should work like this: When the user enters a number and then clicks the button, the function result is displayed on the web page, as shown in the following figure: When your web app is complete and correct (but not before), upload the .html file, the .css file and the .js file to your 111/p5/ folder on the server. Test the web app on the server using Chrome– that is what gets graded. Always open the DevTools console, and check for error messages. 3. [35 pts] toPirate3.html, toPirate3.js, and toPirate3.css. This is an exercise in Client-side JavaScript. In the Pirate Translator web app, individual button elements differ only in the value of their id attribute and the button content (the word/phrase to be translated). By using an array, it is possible to generate the buttons dynamically using JavaScript, so that you do not have to manually add new button elements every time the vocabulary expands. A) Download toPirate3.js, toPirate3-table.html, and toPirate3.css from Github to your p5 folder. B) Open your toPirate2.html from Project 3 in Atom and Save As.. toPirate3.html. Replace your HTML table in toPirate3.html with the table in toPirate3table.html. Preview toPirate3.html in Chrome. Two rows of the table should populate dynamically when the page loads. If necessary, debug by opening the DevTools Console, and checking for error messages. C) Modify toPirate3.css to style the second row of buttons. D) Add four more words/phrases to the words array in the addButtons function in toPirate3.js. E) In the addButtons function, add a for loop that adds a third row of buttons to the table. Add the necessary style classes to toPirate3.css to style the buttons. Test and debug your web app. F) Repeat steps E-F to add a fourth row of buttons to the table. Test and debug your web app. G) Repeat steps E-F to add a fifth row of buttons to the table. Resources: A Pirate’s Glossary of Terms; Dictionary of the Vulgar Tongue When your pirate translator app is complete and correct (but not before), upload all files to your p5 folder on the server. Test your web app on the server to verify that it is correct and meets the requirements. Check the DevTools console to make sure there are no error messages. 4. [+5 pts Extra Credit] dayOfWeek.js. Create a file name dayOfWeek.js and write an arrow function named dayOfWeek that accepts a Date object dateStr and returns a string that is the day of the week in English form (i.e. “Sunday”, “Monday”, etc.). Test your function by creating a date object that is a significant date to you (such as your birthday) and passing that date object to your function. Test your function at least twice with two different dates. Submit the dayOfWeek.js file to the server. It should include your function code and your two tests. …

Place this order or similar order and get an amazing discount. USE Discount code “GET20” for 20% discount