Posted on Jan 29, 2021

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

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