Independent Exercise 2 - WEB 124

1. This exercise is based on the material from Chapter 4.
2. Review the code on pages 180-181.
3. Watch applicable youtubes.
4. Post your files to the student web server and put the corresponding URL in the Independent Exercise 2 drop box.
5. Warning! WRITE ALL OF THE code FROM SCRATCH! Do not modify existing files from the book, your neighbor, codepen, your mother, or any other entity.
6. Note color coding: keyword, blue: HTML, pink: CSS, green: JavaScript, black: general instructions)

Instructions

Using an html, linked css, and external js file...

1. In your html file, add an h1 element with the text JavaScript calculator.
2. In your html file, add an input element with type="number" and id="num" attribute.
3. Add a label element with appropriate text as well as a for attribute to connect the label to the input element.
4. Add a button element with the text Calculate!
5. Add 4 paragraphs with the text addition, subtraction, multiplication, and division.
6. Give each of the 4 paragraphs an appropriate id value.
7. Using JavaScript, build a function using a for loop, and the += operator, build a string to add 1 through 10 to whatever value the user has entered into the input box and assign the final string to the addition html paragraph.
8. Using JavaScript, build a function using a while loop, and the += operator, build a string to subtract 1 through 10 to whatever value the user has entered into the input box and assign the final string to the subtraction html paragraph.
9. Using JavaScript, build a function using a do while loop, and the += operator, build a string to multiply 1 through 10 to whatever value the user has entered into the input box and assign the final string to the multiplication html paragraph.
10. Using JavaScript, build a function using your choice of a loop construct, and the += operator, build a string to divide 1 through 10 to whatever value the user has entered into the input box and assign the final string to the division html paragraph.
11. Use the .toFixed(2) method to return only two digits to the right of the decimal point in the division function.
12. Build a function that runs all four of the previous functions and attach it to the click event of the button.
13. The images below use the width and float css properties to put the paragraphs side-by-side, but you can style as desired.
14. Style your html with a new, linked style sheet using responsive principles and best practices.
15. Include a couple of basic media queries to make the page render well on a tablet and phone device.
16. Include an appropriate meta viewport tag in the html.
17. As always, follow best practices as outlined on the Homework Checklist.

Your final html file should look similar to the following in a browser: (Your styles will obviously differ.

Upon page load...

After clicking the Calculate! button...