순수한 Javascript로 간단한 쇼핑 카트

저는 코드 멘토이자 개인 프로그래밍 튜터입니다. 오늘 저와 제 학생은 JS에서 이벤트 리스너 작업을 하고 있었고 간단하고 미니멀한 쇼핑 카트를 만드는 방법을 가르치려고 노력했습니다. JS를 배우고 있다면 이것은 좋은 연습이 될 수 있습니다. 코드here를 찾을 수 있습니다.
이 작업에서 다음과 같은 제품을 추가했습니다.

<div class="product">
    <h3>Procut one</h3>
    <p>Price: 2000</p>
    <button data-id="1" data-price="2000">Add to cart</button>
</div>

우리는 현실 세계에서 이것을 수동으로 수행하지 않고 루프로 생성하고 데이터베이스에서 얻은 데이터를 넣을 수 있음을 알고 있습니다.
또한 다음과 같은 탐색 모음이 있습니다.

<div class="toolbar">
    <h1 class="brand">Shop</h1>
    <p>
        Cart items:
        <span id="count">0</span>,
        Price:
        <span id="sum">0</span>
    </p>
</div>

그리고 JS 파일에서 btns 추가 시 이벤트 리스너를 추가하려고 합니다.

let btns = document.querySelectorAll(".products button");

for (let i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", add);
}

그런 다음 장바구니의 제품 상태에 따라 항목을 추가하거나 제거하려고 합니다.

function add(event) {
    let price = Number(event.target.dataset.price);

    let index = cart.indexOf(event.target.dataset.id);
    console.log(cart, index);
    if (index >= 0) {
        cart.splice(index, 1)
        count--;
        sum -= price;
        event.target.className = "";
        event.target.textContent = "Add to cart";
    } else {
        cart.push(event.target.dataset.id);
        count++;
        sum += price;
        event.target.className = "added";
        event.target.textContent = "Remove";
    }
    updateCart();
}

마지막으로 현재 카트 항목을 기반으로 카트를 업데이트합니다.

function updateCart() {
    document.getElementById("sum").textContent = sum;
    document.getElementById("count").textContent = count;
}

전체 코드는 여기github repo에서 사용할 수 있습니다. 도움이 되셨다면 별점 부탁드립니다 :)