Create a new page called checkout.html that will display items that you added to the cart from product.html and a total price. Existing code: product.html (0) Cart
Create a new page called checkout.html that will display items that you added to the cart from product.html and a total price.
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 id="productCount">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);
document.getElementById("productCount").innerHTML = cart.length;
}
function removecart(productid) {
const index = cart.indexOf(productid);
if (index > -1) {
cart.splice(index, 1);
}
document.getElementById("productCount").innerHTML = cart.length;
console.log(cart);
}
Step by step
Solved in 4 steps with 1 images
