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

Question

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>

<body>

<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);
}