Categories

Featured Products

* { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif; } body { background-color: #f5f5f5; } header { background-color: #ef394e; color: white; padding: 1rem; display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 1.5rem; font-weight: bold; } .search input { padding: 0.5rem; border: none; border-radius: 4px 0 0 4px; } .search button { padding: 0.5rem 1rem; background-color: #333; color: white; border: none; border-radius: 0 4px 4px 0; cursor: pointer; } nav a { color: white; text-decoration: none; margin-left: 1rem; } nav a:hover { text-decoration: underline; } main { padding: 2rem; display: grid; grid-template-columns: 1fr 3fr; gap: 2rem; } .categories, .products, .cart { background-color: white; padding: 1rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .category-list, .product-list { display: grid; gap: 1rem; } .category-list { grid-template-columns: 1fr; } .category { padding: 0.5rem 1rem; background: #f7f7f7; border-radius: 4px; cursor: pointer; transition: background 0.2s; } .category:hover { background: #ef394e; color: white; } .product-list { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .product-card { border: 1px solid #eee; padding: 1rem; border-radius: 8px; transition: transform 0.2s; background: #fff; display: flex; flex-direction: column; align-items: center; } .product-card:hover { transform: translateY(-5px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); } .product-card img { width: 100%; height: 150px; object-fit: contain; margin-bottom: 0.5rem; } .product-card h3 { font-size: 1.1rem; margin-bottom: 0.5rem; } .product-card p { margin-bottom: 0.5rem; } .product-card button { padding: 0.4rem 1rem; background: #ef394e; color: white; border: none; border-radius: 4px; cursor: pointer; } .product-card button:hover { background: #c72c3a; } .cart { grid-column: 1 / span 2; margin-top: 2rem; } .cart-item { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #eee; padding: 0.5rem 0; } .cart-item img { width: 50px; height: 50px; object-fit: contain; margin-right: 1rem; } .cart-item-info { flex: 1; display: flex; align-items: center; } .cart-item-name { font-weight: bold; margin-right: 1rem; } .cart-item-qty { margin: 0 1rem; } .cart-item-remove { background: #ef394e; color: white; border: none; border-radius: 4px; padding: 0.2rem 0.7rem; cursor: pointer; } .cart-item-remove:hover { background: #c72c3a; } #cartTotal { margin-top: 1rem; font-weight: bold; } #clearCartBtn { margin-top: 1rem; background: #333; color: white; border: none; border-radius: 4px; padding: 0.5rem 1rem; cursor: pointer; } #clearCartBtn:hover { background: #ef394e; } footer { text-align: center; padding: 1rem; background-color: #333; color: white; margin-top: 2rem; } const categories = [ { id: 1, name: 'Electronics' }, { id: 2, name: 'Fashion' }, { id: 3, name: 'Home Appliances' }, { id: 4, name: 'Books' }, { id: 5, name: 'Toys' } ]; const products = [ { id: 1, name: 'Smartphone', price: 500, category: 1, image: 'https://via.placeholder.com/150?text=Smartphone' }, { id: 2, name: 'Laptop', price: 1000, category: 1, image: 'https://via.placeholder.com/150?text=Laptop' }, { id: 3, name: 'T-Shirt', price: 20, category: 2, image: 'https://via.placeholder.com/150?text=T-Shirt' }, { id: 4, name: 'Refrigerator', price: 800, category: 3, image: 'https://via.placeholder.com/150?text=Refrigerator' }, { id: 5, name: 'Novel', price: 15, category: 4, image: 'https://via.placeholder.com/150?text=Novel' }, { id: 6, name: 'Action Figure', price: 30, category: 5, image: 'https://via.placeholder.com/150?text=Action+Figure' }, { id: 7, name: 'Headphones', price: 60, category: 1, image: 'https://via.placeholder.com/150?text=Headphones' }, { id: 8, name: 'Dress', price: 45, category: 2, image: 'https://via.placeholder.com/150?text=Dress' }, { id: 9, name: 'Microwave', price: 120, category: 3, image: 'https://via.placeholder.com/150?text=Microwave' }, { id: 10, name: 'Children Book', price: 10, category: 4, image: 'https://via.placeholder.com/150?text=Children+Book' }, { id: 11, name: 'Puzzle', price: 12, category: 5, image: 'https://via.placeholder.com/150?text=Puzzle' } ]; // Cart logic let cart = JSON.parse(localStorage.getItem('cart') || '[]'); function saveCart() { localStorage.setItem('cart', JSON.stringify(cart)); } function updateCartCount() { document.getElementById('cartCount').textContent = cart.reduce((sum, item) => sum + item.qty, 0); } function addToCart(productId) { const product = products.find(p => p.id === productId); const cartItem = cart.find(item => item.id === productId); if (cartItem) { cartItem.qty += 1; } else { cart.push({ ...product, qty: 1 }); } saveCart(); updateCartCount(); } function removeFromCart(productId) { cart = cart.filter(item => item.id !== productId); saveCart(); updateCartCount(); renderCart(); } function clearCart() { cart = []; saveCart(); updateCartCount(); renderCart(); } function changeCartQty(productId, delta) { const cartItem = cart.find(item => item.id === productId); if (!cartItem) return; cartItem.qty += delta; if (cartItem.qty <= 0) { removeFromCart(productId); } else { saveCart(); updateCartCount(); renderCart(); } } // Render categories function renderCategories() { const categoriesContainer = document.getElementById('categories'); categoriesContainer.innerHTML = ''; categories.forEach(category => { const categoryElement = document.createElement('div'); categoryElement.className = 'category'; categoryElement.textContent = category.name; categoryElement.addEventListener('click', () => { renderProducts(products.filter(p => p.category === category.id)); document.getElementById('productsTitle').textContent = category.name + ' Products'; showSection('productsSection'); }); categoriesContainer.appendChild(categoryElement); }); } // Render products function renderProducts(productsToRender = products) { const productsContainer = document.getElementById('products'); productsContainer.innerHTML = ''; productsToRender.forEach(product => { const productElement = document.createElement('div'); productElement.className = 'product-card'; productElement.innerHTML = `

${product.name}

$${product.price}

`; productElement.querySelector('button').addEventListener('click', () => { addToCart(product.id); }); productsContainer.appendChild(productElement); }); } // Render cart function renderCart() { const cartSection = document.getElementById('cartSection'); const cartItems = document.getElementById('cartItems'); const cartTotal = document.getElementById('cartTotal'); cartItems.innerHTML = ''; if (cart.length === 0) { cartItems.innerHTML = '

Your cart is empty.

'; cartTotal.textContent = ''; return; } let total = 0; cart.forEach(item => { total += item.price * item.qty; const itemDiv = document.createElement('div'); itemDiv.className = 'cart-item'; itemDiv.innerHTML = `

${item.name}

${item.qty} $${item.price * item.qty}

`; // Remove itemDiv.querySelectorAll('.cart-item-remove').forEach(btn => { if (btn.hasAttribute('data-delta')) { btn.addEventListener('click', (e) => { const id = parseInt(btn.getAttribute('data-id')); const delta = parseInt(btn.getAttribute('data-delta')); changeCartQty(id, delta); }); } else { btn.addEventListener('click', (e) => { const id = parseInt(btn.getAttribute('data-id')); removeFromCart(id); }); } }); cartItems.appendChild(itemDiv); }); cartTotal.textContent = `Total: $${total}`; } function showSection(sectionId) { document.getElementById('categoriesSection').style.display = 'block'; document.getElementById('productsSection').style.display = 'block'; document.getElementById('cartSection').style.display = 'none'; if (sectionId === 'cartSection') { document.getElementById('categoriesSection').style.display = 'none'; document.getElementById('productsSection').style.display = 'none'; document.getElementById('cartSection').style.display = 'block'; } } // Search function searchProducts(query) { const q = query.trim().toLowerCase(); if (!q) { renderProducts(products); document.getElementById('productsTitle').textContent = 'Featured Products'; return; } const filtered = products.filter(p => p.name.toLowerCase().includes(q)); renderProducts(filtered); document.getElementById('productsTitle').textContent = `Search: "${query}"`; showSection('productsSection'); } // Navigation document.getElementById('homeLink').addEventListener('click', (e) => { e.preventDefault(); renderProducts(products); document.getElementById('productsTitle').textContent = 'Featured Products'; showSection('productsSection'); }); document.getElementById('categoriesLink').addEventListener('click', (e) => { e.preventDefault(); renderCategories(); showSection('productsSection'); }); document.getElementById('cartLink').addEventListener('click', (e) => { e.preventDefault(); renderCart(); showSection('cartSection'); }); document.getElementById('searchBtn').addEventListener('click', () => { searchProducts(document.getElementById('searchInput').value); }); document.getElementById('searchInput').addEventListener('keydown', (e) => { if (e.key === 'Enter') { searchProducts(document.getElementById('searchInput').value); } }); document.getElementById('clearCartBtn').addEventListener('click', clearCart); // Initial render renderCategories(); renderProducts(); updateCartCount();