Домашняя работа 14 урока. Массивы объектов

Количество всех продуктов в чеке:

Среднее количество продуктов в чеке:

Изменение статуса покупки:

Вывод чека:

    
------------------------------------------------------------------------------------------------------------------------
HTML КОД:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Домашняя работа 14 урока. Массивы объектов</title>
</head>
<body>
    <header></header>
    <main>
        <h1>Домашняя работа 14 урока. Массивы объектов</h1>

        <h2>Количество всех продуктов в чеке:</h2>
        <label>Общее количество покупок:</label>
        <span id="span_sum"></span>

        <h2>Среднее количество продуктов в чеке:</h2>
        <label>Среднее количество покупок:</label>
        <span id="span_average"></span>

        <h2>Изменение статуса покупки:</h2>
        <div style="padding-bottom: 20px">
            <label for="product_id" style="margin-right: 10px">Выберите продукт:</label>
            <select name="product" id="product_id">
                <option>Бананы</option>
                <option>Хлеб</option>
                <option>Молоко</option>
            </select>
        </div>
        <button id="btn_product">Пометить купленным</button>

        <h2>Вывод чека:</h2>
        <div class="div_chek"></div>

    </main>
    <footer></footer>

    <script src="js/index.js"></script>

</body>
</html>

------------------------------------------------------------------------------------------------------------------------
JS КОД:

let massProducts = [
    {
        name: "Бананы",
        sum: 2,
        state: "не куплен"
    },
    {
        name: "Хлеб",
        sum: 3,
        state: "не куплен"
    },
    {
        name: "Молоко",
        sum: 5,
        state: "не куплен"
    }
]

let btn_product = document.querySelector("#btn_product");
let chek = document.querySelector(".div_chek");

btn_product.onclick = () => {
    let choice_select = document.querySelector('#product_id').value;
    let k = f(choice_select)
    if ( k === true) {
        console.log('Статус продукта изменен!');
        console.log(massProducts);
        const html = massProducts.map(massProducts => `
            

${massProducts.name}

Колличество: ${massProducts.sum} шт.

Статус: ${massProducts.state}.

`).join(''); chek.innerHTML = html; sum(); average(); } else { console.log('Изменение статуса отклонено!') } } function f(name) { let k = false; for (let i = 0; i < massProducts.length; i++) { if (massProducts[i].name === name && massProducts[i].state === "не куплен") { massProducts[i].state = 'куплен'; k = true; break; } } return k; } function sum() { let span_sum = document.querySelector("#span_sum"); let sum = 0; for (let i = 0; i < massProducts.length; i++) { if (massProducts[i].state === 'куплен') { sum += massProducts[i].sum } } span_sum.innerHTML = sum; } sum() function average() { let span_average = document.querySelector('#span_average'); let sum = 0; for (let i = 0; i < massProducts.length; i++) { if (massProducts[i].state === 'куплен') { sum += massProducts[i].sum; } } span_average.innerHTML = sum/massProducts.length; } average()