Edit and refine the code so that when the add button is pressed, the number in (0)cart link should increase and the number should decrease when the remove button is pressed. Existing code: product.html (0) Cart Clorox $20.00 Household Cleaner Add to Cart Remove from Cart Oxiclean $8.00 Household Cleaner Add to Cart Remove from Cart PineSol $11.00 Household Cleaner Add to Cart Remove from Cart Mr Clean $12.00 Household Cleaner Add to Cart Remove from Cart Windex $15.00 Household Cleaner Add to Cart Remove from Cart cart.js const product = [ { id: 1, name: 'Clorox', price: '$20.00', image: 'img/clorox.jpg', category: 'Household Cleaner', }, { id: 2, name: 'Oxiclean', price: '$8.00', image: 'img/oxiclean.jpg', category: 'Household Cleaner', }, { id: 3, name: 'PineSol', price: '$11.00', image: 'img/pinesol.jpg', category: 'Household Cleaner', }, { id: 4, name: 'Mr Clean', price: '$12.00', image: 'img/mrclean.jpg', category: 'Household Cleaner', }, { id: 5, name: 'Windex', price: '$15.00', image: 'img/windex.jpg', category: 'Household Cleaner', } ]; var cart=new Array(); function addtocart(productid){ for (var i=0, iLen=product.length; i -1) { cart.splice(index, 1); } console.log(cart); } output:
Edit and refine the code so that when the add button is pressed, the number in (0)cart link should increase and the number should decrease when the remove button is pressed.
Existing code:
product.html
<!DOCTYPE html>
<html>
<head>
<script src="./js/cart.js"></script>
</head>
<body>
<div>
<div>
<a href="Checkout.html">
<span style="float:right"><p>(<span>0</span>) Cart</p></span>
</a>
</div>
<div id="product1" class="card">
<img src="img/clorox.jpg">
<h1>Clorox</h1>
<p class="price">$20.00</p>
<p>Household Cleaner</p>
<p><button id="product1Btn1" onclick="addtocart(1)">Add to Cart</button></p>
<p><button id="product1Btn2" onclick="removecart(1)">Remove from Cart</button></p>
</div>
<div id="product2" class="card">
<img src="img/oxiclean.jpg">
<h1>Oxiclean</h1>
<p class="price">$8.00</p>
<p>Household Cleaner</p>
<p><button id="product2Btn1" onclick="addtocart(2)">Add to Cart</button></p>
<p><button id="product2Btn2" onclick="removecart(2)">Remove from Cart</button></p>
</div>
<div id="product3" class="card">
<img src="img/pinesol.jpg">
<h1>PineSol</h1>
<p class="price">$11.00</p>
<p>Household Cleaner</p>
<p><button id="product3Btn1" onclick="addtocart(3)">Add to Cart</button></p>
<p><button id="product3Btn2" onclick="removecart(3)">Remove from Cart</button></p>
</div>
<div id="product4" class="card">
<img src="img/mrclean.jpg">
<h1>Mr Clean</h1>
<p class="price">$12.00</p>
<p>Household Cleaner</p>
<p><button id="product4Btn1" onclick="addtocart(4)">Add to Cart</button></p>
<p><button id="product4Btn2" onclick="removecart(4)">Remove from Cart</button></p>
</div>
<div id="product5" class="card">
<img src="img/windex.jpg">
<h1>Windex</h1>
<p class="price">$15.00</p>
<p>Household Cleaner</p>
<p><button id="product5Btn1" onclick="addtocart(5)">Add to Cart</button></p>
<p><button id="product5Btn2" onclick="removecart(5)">Remove from Cart</button></p>
</div>
</body>
</html>
cart.js
const product = [
{
id: 1,
name: 'Clorox',
price: '$20.00',
image: 'img/clorox.jpg',
category: 'Household Cleaner',
},
{
id: 2,
name: 'Oxiclean',
price: '$8.00',
image: 'img/oxiclean.jpg',
category: 'Household Cleaner',
},
{
id: 3,
name: 'PineSol',
price: '$11.00',
image: 'img/pinesol.jpg',
category: 'Household Cleaner',
},
{
id: 4,
name: 'Mr Clean',
price: '$12.00',
image: 'img/mrclean.jpg',
category: 'Household Cleaner',
},
{
id: 5,
name: 'Windex',
price: '$15.00',
image: 'img/windex.jpg',
category: 'Household Cleaner',
}
];
var cart=new Array();
function addtocart(productid){
for (var i=0, iLen=product.length; i<iLen; i++) {
if (product[i].id == productid) {
cart.push(product[i].id);
}
}
console.log(cart);
}
function removecart(productid){
const index = cart.indexOf(productid);
if (index > -1) {
cart.splice(index, 1);
}
console.log(cart);
}
output:
Step by step
Solved in 3 steps with 1 images
