JS помощь с подсчетом количества товара в корзине

Question

// 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 basketInfo = document.createElement('div');
basketInfo.className = 'basket__info';
basketInfo.innerHTML =
  `<div class="sum__wrap">Корзина пуста</div>
<div class="sum__price">1</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 infoWrap = document.querySelector('.sum__wrap');
  
   var sum = document.querySelector('.sum__price');
  // -----------------------------------------------------
  function sumSum(massNumber) {
    massNumber = massNumber.reduce(function(price, curr) {
      return price + curr;
    }, 0); 
  }
function addHandlers(count) {
  var minus = count.querySelector(".minus");
  var number = count.querySelector(".number");
  var plus = count.querySelector(".plus");
 let price = count.querySelector('.prod__price');
  let massNumber = [];
  let massPrice = [];
  plus.addEventListener("click", function () {
    number.innerText++;
    massNumber.push(+number.innerText);
    massPrice.push(+price.innerText);
    sum.innerText = sumSum(massNumber) * sumSum(massPrice);
    console.log(massNumber);
    console.log(massPrice);
    sum.innerText = number.innerText * price.innerText;
  });
  minus.addEventListener("click", function () {
    if (number.textContent == 0) {
      number.textContent = 0;
    }
    else 
      number.innerText--;
  });
}

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

dele.addEventListener("click", function() {
  sum.textContent = 0;
  infoWrap.textContent = 'Корзина пуста';
})

* {
    box-sizing: border-box;
}
img {
    width: 500px;
    height: 500px;
    display: flex;
    justify-content: space-between;
}
.delete {
    background: red;
}
.delete:hover {
    background: darkred;
}
.buy {
    background: chartreuse;
}
.buy:hover {
    background: green;
}
.prod__header {
    font-size: 30px;
}
.prod__price {
    font-size: 20px;
}
.minus, .quan, .plus {
    display: inline;
  }
.basket__wrap {
    display: flex;
    justify-content: space-around;
}
.count {
    display: flex;
    justify-content: space-around;
}

.basket__info {
    text-align: center;
    margin-top: 50px;
}
.delete {
    display: block;
    margin: 0 auto;
    margin-top: 50px;
    width: 100px;
    height: 30px;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
    <title>Basket</title>
</head>

<body>
    <div class="main"></div>
</body>

</html>

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

Добрый вечер! Взываю о помощи! Не получается подсчитать общую сумму по всем товарам сразу (считает по отдельности), сделать вывод "в корзине Н товаров на М рублей", в случае, если корзина пуста вывод "Корзина пуста", также пыталась сделать очистку количества товара при нажатии на клавишу "Очистить".

БЛОГ НА HUSL

JS помощь с подсчетом количества товара в корзине

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