i have create a shopping cart .But when i remove any items form my cart the grand total remains same.
Tags: javascript, html, css
Published: 2021-01-29 07:01:11

          Here is my code...
           
           <!DOCTYPE html>
<html lang="en">
<head>

    <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>
</head>
<body>

  <div class="container">
    <nav class="navbar navbar-dark bg-dark">
        <div class="container">
         
             
                <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="cart-items"></div>

    <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>
  </div>

</div>
    <script src="e.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>   

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;
        
    
      }
    
    }