I’m a code mentor and private programming tutor. Today, my student and I were working on event listeners in JS and I tried to teach how to make a simple and minimal shopping cart. If you are learning JS, this could be a good exercise. You can find the code here. And you can see a demo here.

In this work, we added our products like this:

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

We know that in the real world we do not do this manually and we generate them with loops using data that we have retrieved from a database.

We also have a nav-bar like this:

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

And in the JS file, we add event listeners to the add buttons:

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

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

Then we add or remove the items based on the state of the product in the cart:

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();
}

And finally, we update the cart based on the current cart items:

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

The complete code is available in this github repo. If you find it useful, give it a star please :)