Objectives

For this assignment, you are going to apply several skills that you've learned:

• Build an HTML form that has appropriate inputs and labels.
• Use the "onload" event handler of the window object to run some functions.
• Write a function that reads data from the form, does some math and writes some data back to the form.

Set up

Follow the same process that you followed before when you set up the Build a Simple Website assignment - except for this time we'll create the website in a "week2" folder with the typical files:

• index.html
• css/styles.css
• js/scripts.js

This is the standard structure that we'll use in all assignments.

The Problem

We are going to convert the exercise that we did in class yesterday into a website. Here is the problem that we'll solve:

"Youie buys 3 items at the campus bookstore. A backpack, a calculator, and a textbook. The backpack costs $56.99. The calculator costs $104.89. The textbook costs $51.97."

Calculate the total price.

Oh, and the bookstore gives a 10% discount if you spend over $200.00

What is the total cost of the 3 items?

Instructions

1. Create a form that has an input and label for each item that Youie purchased. The label should describe the item. The input value attribute should be set to the value of the item. Add a button to the form. Add one additional input element that will be used to output the total price.
2. Use window.onload to set up your program to run after the page has been loaded. It would look something like this:

   window.onload = function(){ setUpForm(); };

   In the above example I've used "setUpForm" as the name of the function that would run after the page is loaded. You can use your own names for this function. Then have the "setUpForm" function (or whatever you decide to call it) read the button from the DOM, and add a click handler to it. When the user clicks on the button, to totals will be calculated. You'll have one more function that actually calculates the totals and discount.
3. Set the value of the total price input element to the result of your calculations.

Additional resources

This page includes examples of reading the values from the input tags and shows how to add the "click" event handler to the button: Declaring Variables & Variable Scope

This page shows one way of doing the math: In-class Exercise Solution - 2W

Submission Instructions

Submit the URL of your website to this assignment.