Calculating a Grand Total Based on Other Totals Vanilla JavaScript

Question

I followed a tutorial to make a shopping cart that uses localstorage. Now I'm trying to make adjustments to it to fit my own needs to expand my knowledge of JavaScript and to give myself more practice. The instructor made a div for each of the individual item totals (i.e. 4 bananas at $0.25 is $1.00), but I want to add a "Grand Total" section at the bottom of my cart. I am struggling with a way to calculate it. Here is the code for the cart (and at the very bottom is the code that I'm adding for the total)

I know how to and where to set up the new div so that it shows up where I want it to, but I can't figure out how to calculate the Grand Total. I know that I need to base it off of the individual cart items and so that would be on the line that sets the "cost" variable but have tried a couple of things and clearly have no idea what I'm doing. Help!

const CART = []

function showCart() {
  let cartSection = document.getElementById("cart");
  cartSection.innerHTML = "";
  let s = CART.sort();
  s.forEach(item => {
    let cartitem = document.createElement("div");
    cartitem.className = "cart-item";

    let title = document.createElement("h3");
    title.textContent = item.title;
    title.className = "title";
    cartitem.appendChild(title);

    let controls = document.createElement("div");
    controls.className = "controls";
    cartitem.appendChild(controls);

    let plus = document.createElement("span");
    plus.textContent = "+";
    plus.setAttribute("data-id", item.id);
    controls.appendChild(plus);
    plus.addEventListener("click", incrementCart);

    let qty = document.createElement("span");
    qty.textContent = item.qty;
    controls.appendChild(qty);

    let minus = document.createElement("span");
    minus.textContent = "-";
    minus.setAttribute("data-id", item.id);
    controls.appendChild(minus);
    minus.addEventListener("click", decrementCart);

    let price = document.createElement("div");
    price.className = "price";
    let cost = new Intl.NumberFormat("en-CA", {
      style: "currency",
      currency: "CAD"
    }).format(item.qty * item.itemPrice);
    price.textContent = cost;
    cartitem.appendChild(price);

    cartSection.appendChild(cartitem);

  });

  let total = document.createElement("div");
  total.className = "total";
  // Insert "grandTotal" code here.
  const grandTotal = 0
  total.textContent = grandTotal;

  cartSection.appendChild(total);
}

showCart()

<div id="cart"></div>

Answer 1

Change

s.forEach(item => {

to

let grandTotal = 0;
s.forEach(item => {

and change

let cost = new Intl.NumberFormat("en-CA", {
      style: "currency",
      currency: "CAD"
    }).format(item.qty * item.itemPrice);

to

const val = item.qty * item.itemPrice;
grandTotal += val;
let cost = new Intl.NumberFormat("en-CA", {
      style: "currency",
      currency: "CAD"
    }).format(val);

Answer 2

You could use a variable outside the foreach and add each items cost to it.

Your modified code: (info in commnets)

function showCart() {
  let cartSection = document.getElementById("cart");
  cartSection.innerHTML = "";
  let s = CART.sort("qty");
  // a grandTotal variable outside the foreach
  let grandTotal = 0;
  s.forEach(item => {
    let cartitem = document.createElement("div");
    cartitem.className = "cart-item";
    
    let title = document.createElement("h3");
    title.textContent = item.title;
    title.className = "title";
    cartitem.appendChild(title);

    let controls = document.createElement("div");
    controls.className = "controls";
    cartitem.appendChild(controls);

    let plus = document.createElement("span");
    plus.textContent = "+";
    plus.setAttribute("data-id", item.id);
    controls.appendChild(plus);
    plus.addEventListener("click", incrementCart);

    let qty = document.createElement("span");
    qty.textContent = item.qty;
    controls.appendChild(qty);

    let minus = document.createElement("span");
    minus.textContent = "-";
    minus.setAttribute("data-id", item.id);
    controls.appendChild(minus);
    minus.addEventListener("click", decrementCart);

    let price = document.createElement("div");
    price.className = "price";
    let cost = new Intl.NumberFormat("en-CA", {style: "currency", currency: "CAD"}).format(item.qty * item.itemPrice);
    price.textContent = cost;
    cartitem.appendChild(price);

    cartSection.appendChild(cartitem);
    
    // add cost to total
    grandTotal += item.qty * item.itemPrice;
  });
  
  let total = document.createElement("div");
  total.className = "total";
  // format grandTotal or use it as you like it
  console.log(grandTotal);
  total.textContent = grandTotal;

  cartSection.appendChild(total);
}