script.js

const products = [
  { id: 1, name: "Sneakers", price: 1999, img: "https://via.placeholder.com/250x200?text=Sneakers" },
  { id: 2, name: "Headphones", price: 2499, img: "https://via.placeholder.com/250x200?text=Headphones" },
  { id: 3, name: "Smart Watch", price: 3499, img: "https://via.placeholder.com/250x200?text=Smart+Watch" },
  { id: 4, name: "Backpack", price: 1299, img: "https://via.placeholder.com/250x200?text=Backpack" },
  { id: 5, name: "Sunglasses", price: 899, img: "https://via.placeholder.com/250x200?text=Sunglasses" }
];

let cart = [];

// Render products
const productContainer = document.getElementById("products");
products.forEach(p => {
  productContainer.innerHTML += `
    <div class="card">
      <img src="${p.img}" alt="${p.name}">
      <h3>${p.name}</h3>
      <p class="price">₹${p.price}</p>
      <button class="btn" onclick="addToCart(${p.id})">Add to Cart</button>
    </div>
  `;
});

function toggleCart() {
  document.getElementById("cart").classList.toggle("active");
}

function addToCart(id) {
  const product = products.find(p => p.id === id);
  cart.push(product);
  document.getElementById("cart-count").innerText = cart.length;
  renderCart();
}

function renderCart() {
  const cartItems = document.getElementById("cart-items");
  cartItems.innerHTML = "";
  cart.forEach((item) => {
    cartItems.innerHTML += `
      <div class="cart-item">
        <span>${item.name}</span>
        <span>₹${item.price}</span>
      </div>
    `;
  });
}

function checkout() {
  if(cart.length === 0) {
    alert("Your cart is empty!");
  } else {
    alert("Proceeding to checkout with " + cart.length + " items.");
  }
}