script.js

const API_URL = "https://fakestoreapi.com";
FetchProduct();
fetchCategories();
countItemInTheCart()

let productsGrid = document.querySelector("#productsGrid");
let categoryFilter = document.querySelector("#categoryFilter");
let curentProducts = [];
async function FetchProduct() {
  try {
    const reponse = await fetch(`${API_URL}/products`);
    let data = await reponse.json();
    renderProducts(data)
  } catch (error) {
    console.log(error)
  }
}

function renderProducts(products) {
  curentProducts = products

  const newProducts = products
    .map(({ title, image, category, id, price }) => {
      return `
    <div class="product-card">
  <img src="${image}" alt="${title}" class="product-image">
  <div class="product-info">
    <h3>${title}</h3>
    <p class="product-price">$${price.toFixed(2)}</p>
    <p class="product-category">${category}</p>
    <button class="add-to-cart-btn" data-id="${id}">
      Add to Cart
    </button>
  </div>
</div>
    `
    }).join('')

  productsGrid.innerHTML = newProducts
  productsGrid.querySelectorAll(".add-to-cart-btn").forEach(button => {
    button.addEventListener("click", () => {
      const { id } = button.dataset;
      let product = curentProducts.find(products => products.id == id);
      // console.log({...product , quantity:1})
      addTocart(product)


    });
  })
}

function fetchCategories() {
  fetch(`${API_URL}/products/categories`)
    .then((response) => response.json())
    .then((data) => renderCategories(data))
    .catch((error) => console.log(error));


}

function renderCategories(categories) {
  categoryFilter.innerHTML += categories.map(category =>
    `<option value="${category}">${category[0].toUpperCase() + category.slice(1)}</option>`)
}

let cartBrn = document.querySelector('#cartBtn');
let cartModal = document.querySelector('#cartModal');
let catrItems = document.querySelector('#cartItems');
let closeCartModal = document.querySelector('#closeCartModal');




cartBrn.addEventListener('click', () => {
  cartModal.classList.add('active');
  renderCart();
})

closeCartModal.addEventListener('click', () => {
  cartModal.classList.remove('active');
})

function renderCart() {
  let cart = JSON.parse(localStorage.getItem('cart'));
  catrItems.innerHTML = cart.map((item) =>
    `<div class="cart-item">
      <img src="${item.image}" alt="${item.title}">
      <div class="cart-item-details">
        <h4>${item.title}</h4>
        <p>$${item.price.toFixed(2)} × ${item.quantity}</p>
      </div>
      <div class="cart-item-actions">
        <button class="quantity-btn" data-id="${item.id
    }" data-action="decrease">-</button>
        <span>${item.quantity}</span>
        <button class="quantity-btn" data-id="${item.id
    }" data-action="increase">+</button>
      </div>
    </div>
  `).join("");
  catrItems.querySelectorAll(".quantity-btn").forEach((quantityBtn) => {
    quantityBtn.addEventListener("click", () => {
      const { id, action } = quantityBtn.dataset;

      let cartItem = cart.find((crt) => crt.id == id);

      if (action == "increase") {
        cartItem.quantity += 1;
        localStorage.setItem("cart", JSON.stringify(cart));
      } else if (action == "decrease") {
        cartItem.quantity -= 1;
        if (cartItem.quantity === 0) {
          cart = cart.filter((crt) => crt.id != id);
        }
        localStorage.setItem("cart", JSON.stringify(cart));
      }
      countItemInTheCart()
      renderCart();
    });

  })


}

function addTocart(item) {
  let carts = JSON.parse(localStorage.getItem("cart")) || [];
  let existingTocart = carts.find((cartItem) => cartItem.id === item.id)
  if (existingTocart) {
    existingTocart.quantity += 1;
  } else {
    carts.push({ ...item, quantity: 1 });
  }
  localStorage.setItem("cart", JSON.stringify(carts));
  countItemInTheCart()
}

function countItemInTheCart() {
  let cartCount = document.querySelector('#cartCount');
  let cart = JSON.parse(localStorage.getItem('cart')) || [];
  cartCount.textContent = cart.length;
  calculateCartItems()
}

function calculateCartItems() {
  let cartTotal = document.querySelector('#cartTotal');
  let cart = JSON.parse(localStorage.getItem('cart')) || [];
  let total = cart.reduce((acc, item) => acc + (item.price * item.quantity), 0);
  cartTotal.textContent = total.toFixed(2);
}