arctic-store

Sushant Verma

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My Ecommerce Store</title> <style> body { font-family: Arial; margin: 0; background: #f1f3f6; } header { display: flex; justify-content: space-between; padding: 15px; background: #2874f0; color: white; } .products { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; padding: 20px; } .product { background: white; padding: 15px; border-radius: 10px; text-align: center; } .product img { width: 100%; height: 180px; object-fit: cover; } button { padding: 10px; background: #ff9f00; color: white; border: none; cursor: pointer; border-radius: 5px; margin-top: 10px; } #cart-page { display: none; padding: 20px; } </style> </head> <body> <header> <h2>🛍 My Store</h2> <button onclick="showCart()">Cart (<span id="cart-count">0</span>)</button> </header>  <div id="home"> <div class="products" id="product-list"></div> </div>  <div id="cart-page"> <h2>🛒 Your Cart</h2> <div id="cart-items"></div> <h3 id="total"></h3> <button onclick="goHome()">⬅ Back</button> </div> <script> let products = [ { id: 1, name: "Shoes", price: 999, img: "https://via.placeholder.com/200" }, { id: 2, name: "Watch", price: 1999, img: "https://via.placeholder.com/200" }, { id: 3, name: "T-Shirt", price: 499, img: "https://via.placeholder.com/200" }, { id: 4, name: "Headphones", price: 1499, img: "https://via.placeholder.com/200" } ]; let cart = JSON.parse(localStorage.getItem("cart")) || []; function displayProducts() { let container = document.getElementById("product-list"); container.innerHTML = ""; products.forEach(p => { container.innerHTML += ` <div class="product"> <img src="${p.img}"> <h3>${p.name}</h3> <p>₹${p.price}</p> <button onclick="addToCart(${p.id})">Add to Cart</button> </div> `; }); } function addToCart(id) { let item = products.find(p => p.id === id); cart.push(item); localStorage.setItem("cart", JSON.stringify(cart)); updateCartCount(); alert("Added to cart!"); } function updateCartCount() { document.getElementById("cart-count").innerText = cart.length; } function showCart() { document.getElementById("home").style.display = "none"; document.getElementById("cart-page").style.display = "block"; displayCart(); } function goHome() { document.getElementById("home").style.display = "block"; document.getElementById("cart-page").style.display = "none"; } function displayCart() { let container = document.getElementById("cart-items"); let total = 0; container.innerHTML = ""; if (cart.length === 0) { container.innerHTML = "<p>Your cart is empty</p>"; } cart.forEach((item, index) => { total += item.price; container.innerHTML += ` <div class="product"> <h3>${item.name}</h3> <p>₹${item.price}</p> <button onclick="removeItem(${index})">Remove</button> </div> `; }); document.getElementById("total").innerText = "Total: ₹" + total; } function removeItem(index) { cart.splice(index, 1); localStorage.setItem("cart", JSON.stringify(cart)); displayCart(); updateCartCount(); } displayProducts(); updateCartCount(); </script> </body> </html>

Comments (0)

No comments yet. Be the first!