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>
Step by step
Solved in 2 steps
