<title>E-commerce Platform</title> <style> /* Inline CSS */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #333; color: #fff; padding: 10px; text-align: center; } .product { border: 1px solid #ccc; padding: 20px; margin: 10px; width: 200px; float: left; text-align: center; } .cart { border: 1px solid #ccc; padding: 20px; margin: 10px; width: 200px; float: right; } </style> E-commerce Platform Product 1 Price: $20 Add to Cart Product 2 Price: $30 Add to Cart Cart Total: $0 <script> // JavaScript let cartItems = []; let total = 0; function addToCart(productName, price) { cartItems.push({ name: productName, price: price }); total += price; let cartItemsList = document.getElementById("cart-items"); let cartTotal = document.getElementById("cart-total"); cartItemsList.innerHTML = ""; cartItems.forEach(item => { let li = document.createElement("li"); li.textContent = `${item.name} - $${item.price}`; cartItemsList.appendChild(li); }); cartTotal.textContent = total; } </script>