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>

hint: gather all your individual prices into an array and use the reduce function to calculate the total sum — Chris M, Dec 22 '20 at 19:26
I made you a snippet. i had to remove the string from the sort and you need to provide US with the CART content — mplungjan, Dec 22 '20 at 19:31

score 1 · Answer 1 · answered Dec 22 '20 at 19:33

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

DRY. Don't Repeat Yourself – mplungjan Dec 22 '20 at 19:36 — mplungjan, Dec 22 '20 at 19:36

score 1 · Accepted Answer · answered Dec 22 '20 at 19:35

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

answered Dec 22 '20 at 19:35

mplungjan

169,008
28
173
236

1

Thanks!! This was perfect! – redliz5808 Dec 23 '20 at 12:09

Calculating a Grand Total Based on Other Totals Vanilla JavaScript

2 Answers2