Table of Contents

1. Intro
2. CodePen

Intro

This was a quick project to style up an interesting 'add to cart' button. It was created in CodePen but I've since added it to this blog post with a slight addition of sessionStorage. Click the button in the purple header on this page to see it working.

Session Storeage

addToCartButton = document.querySelectorAll(".add-to-cart-button");
cartCounter = document.querySelector("#cartCount");
var count = sessionStorage.getItem('cartCount');

if (sessionStorage.getItem('cartCount') > 0) {
  cartCounter.innerHTML = sessionStorage.getItem('cartCount');
} else {
  cartCounter.classList.add("hidden");
}

document.querySelectorAll('.add-to-cart-button').forEach(function(addToCartButton) {
  addToCartButton.addEventListener('click', function(e) {
    addToCartButton.setAttribute("disabled", "disabled");
    count++;
    sessionStorage.setItem('cartCount', count);
    cartCounter.innerHTML = sessionStorage.getItem('cartCount');
    cartCounter.classList.remove("hidden");

    addToCartButton.classList.add('added');
    setTimeout(function() {
      addToCartButton.classList.remove('added');
      addToCartButton.removeAttribute("disabled");
    }, 3000);
  });
});

CodePen

CodePen

---

• Next: Making a Brew With Async Await
• Previous: Sass Interpolation