JS Не получается сделать добавление в корзину суммы товаров при нажатии на кнопку "добавить" и вывод "в корзине Н товаров стоимостью М рублей"

https://codepen.io/sophie-lamperg/pen/zYqqMgP

// 

document.addEventListener('DOMContentLoaded', () => {
let main = document.querySelector('.main');
let hd = document.createElement('h1');
hd.className = 'header';
hd.innerHTML = 'This is your basket';
hd.style.textAlign = 'center';
main.appendChild(hd);
let basketWrap = document.createElement('div');
basketWrap.className = 'basket__wrap';
main.appendChild(basketWrap);
let newProd;

class Basket {
  constructor(prod, price) {
    this.prod = prod;
    this.price = price;
  }
  getSum() {
    return this.price * this.number;
  }
}
function createProdItem(item) {
  newProd = document.createElement('div');
  newProd.className = 'prod__wrap';
  newProd.innerHTML = `
 <div class="prod__header">${item.prod}</div>
 
 <div class="count">
 <div class="prod__price">${item.price}</div>
 <button class="minus">-</button>
 <div class="number">0</div>
 <button class="plus">+</button>
</div>`;
  basketWrap.appendChild(newProd);
}
let addBasket = document.createElement('button');
addBasket.className = 'add__btn';
addBasket.innerHTML = 'Добавить';
main.appendChild(addBasket);

// ------------------------------------------
let basketInfo = document.createElement('div');
basketInfo.className = 'basket__info';
basketInfo.innerHTML =
  `<div class="sum__wrap">Корзина пуста</div>
   <div class="sum__price"></div>`;
main.appendChild(basketInfo);

let newFood1 = new Basket("pizza", 1500);
let newFood2 = new Basket("sandwich", 120);
let newFood3 = new Basket("ice", 100);
createProdItem(newFood1);
createProdItem(newFood2);
createProdItem(newFood3);
// -------------------------------------------------------
let del = document.createElement('button');
del.className = 'delete';
del.innerHTML = 'Очистить';
main.appendChild(del);
// -----------------------------------------------

var sum = document.querySelector('.sum__price');
// -----------------------------------------------------
var infoWrap = document.querySelector('.sum__wrap');
//  ----------------------plus and minus--------------------
function addHandlers(count) {
  var minus = count.querySelector(".minus");
  var number = count.querySelector(".number");
  var plus = count.querySelector(".plus");
  let price = count.querySelector('.prod__price');
  // var number1 = document.querySelectorAll(".number");
  // let price1 = document.querySelectorAll('.prod__price');
  let massSum = [];
  plus.addEventListener("click", function () {
   number.innerText++;
    sum = number.innerText * price.innerText; 
    massSum.push(sum);
  });
  minus.addEventListener("click", function () {
    if (number.textContent == 0) {
      number.textContent = 0;
    }
    else {
      number.innerText--;
      // sum = sum - number.innerText * price.innerText;
    }
  });
}

var counts = document.querySelectorAll(".count");
counts.forEach(addHandlers);
// var bw = document.querySelector('.basket__wrap');

// -------------------clear--------------------------------
let dele = document.querySelector('.delete');

dele.addEventListener("click", function () {
  var number = document.querySelectorAll(".number");
  sum.textContent = 0;
  infoWrap.textContent = 'Корзина пуста';
  for (let i = 0; i < number.length; i++) {
    number[i].innerText = 0;
  }
})

let price = document.querySelectorAll('.prod__price');
var number = document.querySelectorAll(".number");
addBasket.addEventListener("click", function () {
  infoWrap.innerText = `В корзине  товаров на сумму  рублей`;
})

Ответы (0 шт):