css

const btnCart = document.querySelector('#cart-icon');

const cart = document.querySelector('.cart');

const btnClose = document.querySelector('#cart-close');

btnCart.addEventListener('click', () => {

  cart.classList.add('cart-active');

});

btnClose.addEventListener('click', () => {

  cart.classList.remove('cart-active');

});

document.addEventListener('DOMContentLoaded', () => {

  loadContent();

  loadFood();

});

function loadFood() {

  // Any initialization related to food items can be placed here

}

function loadContent() {

  // Retrieve item list from localStorage

  itemList = JSON.parse(localStorage.getItem('cartItems')) || [];

  // Remove Food Items From Cart

  let btnRemove = document.querySelectorAll('.cart-remove');

  btnRemove.forEach((btn) => {

    btn.addEventListener('click', removeItem);

  });

  // Product Item Change Event

  let qtyElements = document.querySelectorAll('.cart-quantity');

  qtyElements.forEach((input) => {

    input.addEventListener('change', changeQty);

  });

  // Product Cart

  let cartBtns = document.querySelectorAll('.add-cart');

  cartBtns.forEach((btn) => {

    btn.addEventListener('click', addCart);

  });

  // Update cart UI and total

  updateCartUI();

}

function removeItem() {

  if (confirm('Are You Sure to Remove')) {

    let title = this.parentElement.querySelector('.cart-food-title').innerHTML;

    itemList = itemList.filter((el) => el.title !== title);

    localStorage.setItem('cartItems', JSON.stringify(itemList)); // Update localStorage

    this.parentElement.remove();

    updateCartUI();

  }

}

function changeQty() {

  if (isNaN(this.value) || this.value < 1) {

    this.value = 1;

  }

  let title = this.parentElement.querySelector('.cart-food-title').innerHTML;

  itemList = itemList.map((item) => {

    if (item.title === title) {

      item.quantity = parseInt(this.value); // Update quantity

    }

    return item;

  });

  localStorage.setItem('cartItems', JSON.stringify(itemList)); // Update localStorage

  updateCartUI();

}

function addCart() {

  let food = this.parentElement;

  let title = food.querySelector('.food-title').innerHTML;

  let price = food.querySelector('.food-price').innerHTML;

  let imgSrc = food.querySelector('.food-img').src;

  let newProduct = { title, price, imgSrc, quantity: 1 };

  // Check if product already exists in cart

  let existingItem = itemList.find((el) => el.title === newProduct.title);

  if (existingItem) {

    alert('Product Already added in Cart');

    return;

  }

  itemList.push(newProduct);

  localStorage.setItem('cartItems', JSON.stringify(itemList)); // Save to localStorage

  let newProductElement = createCartProduct(title, price, imgSrc);

  let element = document.createElement('div');

  element.innerHTML = newProductElement;

  let cartBasket = document.querySelector('.cart-content');

  cartBasket.append(element);

  updateCartUI();

}

function createCartProduct(title, price, imgSrc) {

  return `

    <div class="cart-box">

      <img src="${imgSrc}" class="cart-img">

      <div class="detail-box">

        <div class="cart-food-title">${title}</div>

        <div class="price-box">

          <div class="cart-price">${price}</div>

          <div class="cart-amt">${price}</div>

        </div>

        <input type="number" value="1" class="cart-quantity">

      </div>

      <ion-icon name="trash" class="cart-remove"></ion-icon>

    </div>

  `;

}

function updateCartUI() {

  const cartItems = document.querySelectorAll('.cart-box');

  const totalValue = document.querySelector('.total-price');

  let total = 0;

  cartItems.forEach(product => {

    let priceElement = product.querySelector('.cart-price');

    let price = parseFloat(priceElement.innerHTML.replace("Rs.", ""));

    let qty = product.querySelector('.cart-quantity').value;

    total += (price * qty);

    product.querySelector('.cart-amt').innerText = "Rs." + (price * qty);

  });

  totalValue.innerHTML = 'Rs.' + total.toFixed(2);

  // Update Product Count in Cart Icon

  const cartCount = document.querySelector('.cart-count');

  let count = itemList.length;

  cartCount.innerHTML = count;

  if (count === 0) {

    cartCount.style.display = 'none';

  } else {

    cartCount.style.display = 'block';

  }

}