Using the existing code: Create a shoppingcart.js file and include it in the products page. In the shoppingcart.js file, 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 and store it in the products array when the script loads. The shoppingcart.js should: Program the add button to take the product id from products.html, finds the product object in the products array and add it to the items purchased array. Program the remove button to take the product id from products.html and remove the corresponding object from the items purchased array. Return html for displaying the items in the cart. Existing code: products.html Products 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
Using the existing code:
Create a shoppingcart.js file and include it in the products page. In the shoppingcart.js file, 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 and store it in the products array when the script loads.
The shoppingcart.js should:
Program the add button to take the product id from products.html, finds the product object in the products array and add it to the items purchased array.
Program the remove button to take the product id from products.html and remove the corresponding object from the items purchased array.
Return html for displaying the items in the cart.
Existing code:
products.html
<!DOCTYPE html>
<html>
<head>
<title>Products</title>
</head>
<body>
<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
