/* General Reset */ * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Poppins', sans-serif; } body { background-color: #f8f9fa; color: #222; } header { background-color: #111; color: white; padding: 20px 0; } .container { width: 90%; margin: auto; display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 1.6em; } .nav-links { list-style: none; display: flex; gap: 20px; } .nav-links a { color: white; text-decoration: none; } .hero { padding: 50px; text-align: center; background: linear-gradient(90deg, #3498db, #2ecc71); color: white; } .product-grid { display: flex; justify-content: center; gap: 25px; margin: 50px 0; flex-wrap: wrap; } .product { background: white; border-radius: 8px; padding: 20px; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,0.1); width: 250px; } .product img { width: 100%; border-radius: 8px; } button.add-to-cart { background-color: #3498db; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; } button.add-to-cart:hover { background-color: #2980b9; } #cart-section { width: 80%; margin: 30px auto; background: white; border-radius: 8px; padding: 20px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); } .hidden { display: none; } footer { background-color: #111; color: white; text-align: center; padding: 15px; } const cart = []; const cartBtn = document.getElementById("cart-btn"); const cartSection = document.getElementById("cart-section"); const cartTable = document.getElementById("cart-table").querySelector("tbody"); const cartCount = document.getElementById("cart-count"); const totalAmount = document.getElementById("total-amount"); document.querySelectorAll(".add-to-cart").forEach(btn => { btn.addEventListener("click", () => { const id = btn.dataset.id; const name = btn.dataset.name; const price = parseFloat(btn.dataset.price); const item = cart.find(p => p.id === id); if (item) { item.qty++; } else { cart.push({ id, name, price, qty: 1 }); } updateCart(); }); }); cartBtn.addEventListener("click", () => { cartSection.classList.toggle("hidden"); }); function updateCart() { cartTable.innerHTML = ""; let total = 0; cart.forEach(item => { const row = document.createElement("tr"); const lineTotal = (item.price * item.qty).toFixed(2); total += parseFloat(lineTotal); row.innerHTML = ` ${item.name} $${item.price} ${item.qty} $${lineTotal} `; cartTable.appendChild(row); }); totalAmount.textContent = total.toFixed(2); cartCount.textContent = cart.length; } function removeItem(id) { const index = cart.findIndex(p => p.id === id); if (index !== -1) { cart.splice(index, 1); updateCart(); } }

top of page