Create a javascript file and use it as script for the products.html page. In the script, create an empty array to store the items added to the cart. Create a products array and create a product object for each of your products from products.html and store it in the products array when the script loads. The script should have the following functions: Add - Takes an id, finds the product object in the products array and adds it to the items purchased array. Remove - Takes an id and removes the corresponding object from the items purchased array. Returns html for displaying the items in the cart. Existing code: products.html Products (0) Cart Price: $10 Name: Clorox Description: Household Product ID: product1 Add to cart Remove from cart Price: $15 Name: Oxiclean Description: Product Packaging ID: product2 Add to cart Remove from cart Price: $20 Name: Pinesol Description: Household Product ID: product3 Add to cart Remove from cart Price: $15 Name: Mr Clean Description: Household Product ID: product4 Add to cart Remove from cart Price: $10 Name: Windex Description: Household Product ID: product5 Add to cart Remove from cart
Create a javascript file and use it as script for the products.html page. In the script, create an empty array to store the items added to the cart. Create a products array and create a product object for each of your products from products.html and store it in the products array when the script loads.
The script should have the following functions:
Add - Takes an id, finds the product object in the products array and adds it to the items purchased array.
Remove - Takes an id and removes the corresponding object from the items purchased array.
Returns html for displaying the items in the cart.
Existing code:
products.html
<!DOCTYPE html>
<html>
<head>
<title>Products</title>
</head>
<body>
<div>
<div>
<a href="Checkout.html">
<span style="float:right"><p>(<span>0</span>) Cart</p></span>
</a>
</div>
<div class="product">
<img src="img/clorox.jpg">
<p class="price">Price: $10</p>
<p class="name">Name: Clorox</p>
<p class="description">Description: Household Product</p>
<p class="id">ID: product1</p>
<span><button id="product1">
Add to cart
</button>
<button>
Remove from cart
</button>
</span>
</div>
<br>
<div class="product">
<img src="img/oxiclean.jpg">
<p class="price">Price: $15</p>
<p class="name">Name: Oxiclean</p>
<p class="description">Description: Product Packaging</p>
<p class="id">ID: product2</p>
<span><button id="product2">
Add to cart
</button>
<button>
Remove from cart
</button>
</span>
</div>
<br>
<div class="product">
<img src="img/pinesol.jpg">
<p class="price">Price: $20</p>
<p class="name">Name: Pinesol</p>
<p class="description">Description: Household Product</p>
<p class="id">ID: product3</p>
<span><button id="product3">
Add to cart
</button>
<button>
Remove from cart
</button>
</span>
</div>
<br>
<div class="product">
<img src="img/mrclean.jpg">
<p class="price">Price: $15</p>
<p class="name">Name: Mr Clean</p>
<p class="description">Description: Household Product</p>
<p class="id">ID: product4</p>
<span><button id="product4">
Add to cart
</button>
<button>
Remove from cart
</button>
</span>
</div>
<br>
<div class="product">
<img src="img/windex.jpg">
<p class="price">Price: $10</p>
<p class="name">Name: Windex</p>
<p class="description">Description: Household Product</p>
<p class="id">ID: product5</p>
<span><button id="product5">
Add to cart
</button>
<button>
Remove from cart
</button>
</span>
</div>
<br>
</div>
</body>
</html>
![](/static/compass_v2/shared-icons/check-mark.png)
Step by step
Solved in 2 steps
![Blurred answer](/static/compass_v2/solution-images/blurred-answer.jpg)
![Computer Networking: A Top-Down Approach (7th Edi…](https://www.bartleby.com/isbn_cover_images/9780133594140/9780133594140_smallCoverImage.gif)
![Computer Organization and Design MIPS Edition, Fi…](https://www.bartleby.com/isbn_cover_images/9780124077263/9780124077263_smallCoverImage.gif)
![Network+ Guide to Networks (MindTap Course List)](https://www.bartleby.com/isbn_cover_images/9781337569330/9781337569330_smallCoverImage.gif)
![Computer Networking: A Top-Down Approach (7th Edi…](https://www.bartleby.com/isbn_cover_images/9780133594140/9780133594140_smallCoverImage.gif)
![Computer Organization and Design MIPS Edition, Fi…](https://www.bartleby.com/isbn_cover_images/9780124077263/9780124077263_smallCoverImage.gif)
![Network+ Guide to Networks (MindTap Course List)](https://www.bartleby.com/isbn_cover_images/9781337569330/9781337569330_smallCoverImage.gif)
![Concepts of Database Management](https://www.bartleby.com/isbn_cover_images/9781337093422/9781337093422_smallCoverImage.gif)
![Prelude to Programming](https://www.bartleby.com/isbn_cover_images/9780133750423/9780133750423_smallCoverImage.jpg)
![Sc Business Data Communications and Networking, T…](https://www.bartleby.com/isbn_cover_images/9781119368830/9781119368830_smallCoverImage.gif)