Check out the DOM notes carefully before going after this program. Your data is an array of object literals that looks like this.
var items = [ {item: 'boogie board', cost: 15.99, quantity: 3}, {item: 'shark-tooth necklace', cost: 10.99, quantity: 1}, {item: 'inflatable alligator', cost: 12.99, quantity: 2}, {item: 'flip flops', cost: 16.99, quantity: 1}, {item: 'beach towel', cost: 10.99, quantity: 2}, {item: 'goggles', cost: 8.99, quantity: 2} ];
Your program will take this data and generate an HTML table to display it to the user. When you first run your code it should display something similar the following heading and button.
When you press press the button to display your code should display a Bootstrap styled table of the beach items along with the calculated total for each object. For example, the first item, boogie board, 3 were purchased. So the subtotal is 3 * 15.99 = 47.97. The first 2 rows of the table should look like this. The table should have 6 rows in all.
You cannot alter or rewrite the given array of objects. The subtotal must be calculated in the function that generates the table.
The page must be fully styled using Bootstrap with a div for class='container'.
The calculated subtotals must be rounded to 2 decimal place.
The table should not be visible until the button is clicked, and it must be generated using DOM methods like createElement(), insertRow(), insertCell(), and so on. You cannot concatenate the table.
Clicking the button calls a function to generate the table, but you cannot call the function that generates to table using an onclick attribute in the button.
As before, attach the html page to an email and send it to me if you have questions or are ready to submit. Let me know if you have questions.
-
(I've attached two photos I've snipping tooled of the assignment in case this transcript doesn't format properly.)