Edit and refine the code so at the top right of the page, there's a link that says '(0)cart'. When the add button is pressed, this number should increase. When the remove button is pressed, this number should decrease. When I click on the link, it should take me to a new page called checkout.html. The checkout.html page should display all the items in the cart, and a total price. Add a form on the page that takes my name, email, phone number, and credit card number. Use a regular expression to validate the email, phone number, and credit card.
Edit and refine the code so at the top right of the page, there's a link that says '(0)cart'. When the add button is pressed, this number should increase. When the remove button is pressed, this number should decrease. When I click on the link, it should take me to a new page called checkout.html. The checkout.html page should display all the items in the cart, and a total price. Add a form on the page that takes my name, email, phone number, and credit card number. Use a regular expression to validate the email, phone number, and credit card.
Existing code:
product.html
<!DOCTYPE html>
<html>
<head>
<script src="./js/cart.js"></script>
</head>
<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);
}
function removecart(productid){
const index = cart.indexOf(productid);
if (index > -1) {
cart.splice(index, 1);
}
console.log(cart);
}
output:
Step by step
Solved in 4 steps with 2 images
