Great job making the item counter update with each click of an Add to Cart button.

Now, let's show the total cost of all items in the cart when users click on the cart image.

<html>
<head>
<style>
body { color: midnightblue; font-family: "Helvetica Neue"; } .product { display: inline-block; margin: 5px; } #basketImage { position: absolute; right: 16px; top: 16px; } #itemCounter { position: absolute; right: 56px; top: 0px; } #orderTotal { margin-right: 16px; text-align: right; } button { touch-action: manipulation; }
</style>
</head>
<body>
<h1>Online Store</h1>
<img id="basketImage" src="https://mimo.app/r/cart.png">
<h2 id="itemCounter">0</h2>
<p id="orderTotal"></p>
<div class="product">
<img src="https://mimo.app/r/backpack.png">
<h3>Backpack</h3>
<button onclick="addToCart(backpack)">Add to Cart</button>
</div>
<div class="product">
<img src="https://mimo.app/r/camera.png">
<h3>Camera</h3>
<button onclick="addToCart(camera)">Add to Cart</button>
</div>
<script>
var cartItems = [];
var backpack = { name: "Backpack", price: 400 };
var camera = { name: "Camera", price: 300 };
function addToCart(item) {
cartItems.push(item);
document.getElementById("itemCounter").innerHTML = cartItems.length;
}
</script>
</body>
</html>]]>