i have create a shopping cart .But when i remove any items form my cart the grand total remains same.

#javascript #html #css

      Here is my code...

       <!DOCTYPE html>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Food Shop</title>

            <a href="cart.html"><i class="fa fa-shopping-cart" style="color:red" > </i></a>
            <a class="navbar-brand" href="#">Pizza shop</a>

    </div>
  </nav>

<div class="card" style="width: 18rem;">
    <img class="card-img-top" src="images/p.jpg" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Blossum pizza</h5>
      <p class="card-text">$10</p>
      <a href="#" class="btn btn-primary">add to cart </a>
    </div>
</div>

<div class="card" style="width: 18rem;">
    <img class="card-img-top" src="images/m.jpg" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Blossum pizza</h5>
      <p class="card-text">$15</p>
      <a href="#" class="btn btn-primary">add to cart</a>
    </div>
</div>

javascript

 let carts = document.querySelectorAll(".btn-primary");

 let products= [
{
    name: 'pizza',
    price:10,
    tag: 'ppizza',
    inCart:0
},
{
    name: 'pitza',
    price:15,
    tag: 'mpizza',
    inCart:0

}


];
for (let i = 0; i< carts.length; i++) {
carts[i].addEventListener('click', () => {
cartNumbers(products[i]);
totalCost(products[i]);
})
}

function cartLoad() {
let productNumbers = localStorage.getItem('cartNumbers');

if (productNumbers){
    document.querySelector('.fa-shopping-cart').textContent 

 =productNumbers;
}

}

 function cartNumbers(product) {

 let productNumbers = localStorage.getItem('cartNumbers');



  productNumbers = parseInt(productNumbers);

  if (productNumbers) {
    localStorage.setItem('cartNumbers', productNumbers + 1);
    document.querySelector('.fa-shopping-cart').textContent                    
     =productNumbers + 1;
  }
  else{
    localStorage.setItem('cartNumbers',  1);
    document.querySelector('.fa-shopping-cart').textContent  
     =1;
  }
  setItems(product);



}

function setItems(product){
  let cartItems = localStorage.getItem('productsIncart');
  cartItems = JSON.parse(cartItems);
  if(cartItems !=null){
    if(cartItems[product.tag] == undefined){
      cartItems ={
        ...cartItems,[product.tag]:product
      }

    }

    cartItems[product.tag].inCart +=1;
  }else{
    product.inCart = 1;
   cartItems ={
    [product.tag]:product
  }

  }

localStorage.setItem('productsIncart',JSON.stringify   
(cartItems));

}

function totalCost(product){
  let cartCost = localStorage.getItem('totalCost');


  if (cartCost !=null){
    cartCost = parseInt(cartCost);
    localStorage.setItem("totalCost", cartCost + product.price);
  }else{
    localStorage.setItem("totalCost",product.price);
  }


}

function displayCart(){
let cartItems = localStorage.getItem("productsIncart");
  cartItems = JSON.parse(cartItems);

  let productContainer = document.querySelector (".products")
  let cartCost = localStorage.getItem('totalCost');

  if(cartItems && productContainer){
      productContainer.innerHTML ='';
      Object.values(cartItems).map(item =>{

        productContainer.innerHTML += `

    <div class=""container">
        <div class="row">
               <div class="col-sm">
               <button type="button" class="dark" >Remove </button>
                  ${item.name}


                </div>

              <div class="col-sm">
                  ${item.price} 
              </div>
              <div class="col-sm">
              <button style='font-size:10px;color:red'>decrease <i class='fas fa-angle-left'></i></button>


                 ${item.inCart}
                 <button style='font-size:10px;color:blue'>increase <i class='fas fa-angle-right'></i></button>


              </div>

              <div class="col-sm">
                  ${item.price * item.inCart}
                </div>
        </div>
    </div>
         `;
      });

      productContainer.innerHTML += `

      <div class="container">
      <div class="col-6 col-md-4">
          <div class="col">
          <h4>  Grand Total </h4>
            <div class="p-3 border bg-light">${cartCost}</div>

          </div>
        </div>
      </div>
      `

  }

}
displayCart();
cartLoad();


  let button = document.getElementsByClassName('dark');
 for (let i = 0; i < button.length; i++) {
  button[i].addEventListener('click', function(event)  {
   let clicked= event.target
   clicked.parentElement.parentElement.remove()
   remove();


   })

 }

 function remove(){
 let itemRemove = localStorage.getItem("cartNumbers");

  itemRemove = parseInt(itemRemove);
  if(itemRemove){
    localStorage.setItem("cartNumbers", itemRemove -1)
    document.querySelector('.fa-shopping-cart').textContent =itemRemove - 1;
  } else{
    localStorage.setItem("cartNumbers",1);
    document.querySelector('.fa-shopping-cart').textContent = 1;


  }

}