Edit the code so that at the top right of the products.html page there is a link that says "(0) cart". When I click on the link, it should take me to a Checkout.html page. 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
Edit the code so that at the top right of the products.html page there is a link that says "(0) cart". When I click on the link, it should take me to a Checkout.html page.
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 with 2 images
