<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/i/cart.png" onclick="clickCart()" >
<h2 id="itemCounter">0</h2>
<p id="orderTotal"></p>
<div class="product">
<img src="https://mimo.app/i/backpack.png">
<h3>Backpack</h3>
<button onclick="addToCart(backpack)">Add to Cart</button>
</div>
<div class="product">
<img src="https://mimo.app/i/camera.png">
<h3>Camera</h3>
<button onclick="addToCart(camera)">Add to Cart</button>
</div>
<script>var cartItems = [];
var isTotalHidden = true;
var backpack = { name: "Backpack", price: 400 };
var camera = { name: "Camera", price: 300 };
function addToCart(item) {
cartItems.push(item);
document.getElementById("itemCounter").innerHTML = cartItems.length;
showTotal();
}
function clickCart() {
isTotalHidden = !isTotalHidden; showTotal();
}
function showTotal() {
var orderTotal = document.getElementById("orderTotal"); orderTotal.innerHTML = "";
if (isTotalHidden === false) {
var total = 0;
for (var i = 0; i < cartItems.length; i++) {
total += cartItems[i].price;
}
orderTotal.innerHTML += "Total: $" + total;
}
}
</script>
</body>
</html>
]]>