Домашняя работа 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()