scripts.js

if(localStorage.getItem("login") !== "true"){
  window.location.href = "index.html";
}

const authBtn = document.getElementById("authBtn");

authBtn.innerText = "Logout";

authBtn.onclick = ()=>{
  localStorage.removeItem("login");
  window.location.href = "index.html";
}

//products
const products = [
 {id:1,name:"Running Shoes",price:'2,999',img:"assests/show.jpg"},
 {id:2,name:"Gym Bag",price:'1,999',img:"assests/p1284796.jpg"},
 {id:3,name:"Sports Watch",price:'4,999',img:"https://images.unsplash.com/photo-1523275335684-37898b6baf30"},
 {id:4,name:"Football",price:999,img:"assests/football-mini-learning-ball-size-1-purple-green.avif"},
 {id:5,name:"Helmet",price:'2,499',img:"assests/road-bike-helmet-roadr-500-neon-yellow.avif"},
 {id:6,name:"Yoga Mat",price:799,img:"assests/adjustable-yoga-mat-strap-mottled-grey.avif"},
 {id:7,name:"Bottle",price:699,img:"assests/gallon-water-bottle-2-2l-leak-proof-cap-multi-purpose-grey.avif"},
 {id:9,name:"Cricket Bat",price:999,img:"assests/cricket-all-weather-plastic-kit-cst500.avif"},
 {id:10,name:"OXELO",price:'11,999',img:"assests/kids-skating-shoes-inline-play-3-blue.avif"},
 {id:11,name:"Canaveral",price:899,img:"assests/darts-board-ed110-soft-electronic-plastip-black-and-blue-6-darts-included.avif"},
 {id:13,name:"RainCoat",price:799,img:"assests/rain-jacket-rc100-indigo-blue.avif"},
 {id:14,name:"Pickelball Racket",price:599,img:"assests/lifelong-pickleball-paddle-set-2-rackets-4-pickle-balls-and-paddle-bag-cover.avif"},
 {id:15,name:"RockRider",price:'5,999',img:"assests/mountain-bike-rockrider-st30-7-speed-mtb-tyres-unisex-frame-v-brakes.avif"},
 {id:16,name:"TreadMill",price:'74,999',img:"assests/p2688754.jpg"},
 {id:17,name:"Caps",price:299,img:"assests/caps2575644.avif"},
 {id:18,name:"Umbrella",price:399,img:"assests/waterproof-umbrella-medium-size-123cm-coverage-uv-protection-auto-open-red.avif"},
];

// storage
let cart = JSON.parse(localStorage.getItem("cart")) || [];
let wishlist = JSON.parse(localStorage.getItem("wishlist")) || [];

function save(){
  localStorage.setItem("cart",JSON.stringify(cart));
  localStorage.setItem("wishlist",JSON.stringify(wishlist));
  updateCounts();
}

function updateCounts(){
  document.getElementById("cartCount").innerText = cart.length;
  document.getElementById("wishCount").innerText = wishlist.length;
}

updateCounts();

//render
const main = document.getElementById("mainContainer");
const sliderImgs = [
 "assests/defaut.avif", 
 "assests/defaut (1).avif", 
 "assests/defaut (3).avif", 
 "assests/defaut (2).avif",  
 "assests/defaut (4).avif",  
 "assests/defaut (5).avif",  
];

for(let i=0;i<products.length;i+=4){

  // product grid
  let grid = document.createElement("div");
  grid.className = "product-grid";

  products.slice(i,i+4).forEach(p=>{
    grid.innerHTML += `
      <div class="card">
        <img src="${p.img}">
        <div class="card-body">
          <h4>${p.name}</h4>
          <p class="price">₹${p.price}</p>
          <div class="btns">
            <button class="cart-btn" onclick="addCart(${p.id})">Add Cart</button>
            <button class="wish-btn" onclick="addWish(${p.id})">Wishlist</button>
          </div>
        </div>
      </div>
    `;
  });

  main.appendChild(grid);

  // carousel 
  let carousel = document.createElement("div");
  carousel.className = "carousel";

  let track = document.createElement("div");
  track.className = "carousel-track";

  sliderImgs.forEach(img=>{
    track.innerHTML += `
      <div class="carousel-slide">
        <img src="${img}">
      </div>`;
  });

  carousel.innerHTML = `
    <button class="arrow left">❮</button>
    <button class="arrow right">❯</button>
  `;
  carousel.appendChild(track);
  main.appendChild(carousel);

  let index = 0;
  const move = ()=> track.style.transform = `translateX(-${index*100}%)`;

  carousel.querySelector(".left").onclick = ()=>{
    index = index===0 ? sliderImgs.length-1 : index-1;
    move();
  };

  carousel.querySelector(".right").onclick = ()=>{
    index = (index+1)%sliderImgs.length;
    move();
  };

  setInterval(()=>{
    index = (index+1)%sliderImgs.length;
    move();
  },4000);
}

// cart and wishlist functions:
function addCart(id){
  const item = products.find(p=>p.id===id);
  cart.push({...item,qty:1});
  save();
}

function addWish(id){
  const item = products.find(p=>p.id===id);
  wishlist.push(item);
  save();
}

if(localStorage.getItem("login") !== "true"){
  window.location.href = "login.html";
}