JSFiddle - React, Tailwind, and code Playground

by PatrickHume

HTML

<div class="ourproducts">
  <div class="card">
    <img class="card-img-top" width="50px" height="50px" src="https://pngpress.com/wp-content/uploads/2020/08/uploads_guava_guava_PNG60.png" alt="product-img" data-hook="product-image">
    <div class="setproprice">
      <div class="proprice">
        <span class="spanpropreice1">Offer</span><span class="card-text">1.50</span>
      </div>
    </div>
    <div class="protext">
      <span>Germany</span>
      <h2 class="card-title">Product-name</h2>
      <span>weight</span>
      <span>tax</span>
    </div>
    <fieldset class="card-block" data-hook="product-item-quantity-counter" aria-label="select the quantity" dir="rtl" data-error="false">

      <div>
        <button class="plus-item" data-name=`cartArray[i].name` onClick='increaseCount(event, this)'><span data-name="cartArray[i].name" class="material-icons plus-item">
            add
          </span></button>

        <input type="number" class="item-count" value="1" data-name="cartArray[i].name" min="1" max="20" step="1">

        <button class="minus-item" data-name="cartArray[i].name" onClick='decreaseCount(event, this)' value="1"><span data-name="cartArray[i].name" class="material-icons minus-item">
            remove
          </span></button>
      </div>
    </fieldset>
    <button class="additem" data-name="tne name of the product" data-price="2.00"> Add Item<span class="material-icons">
        shopping_cart
      </span></button>
  </div>

</div>
<table class="show-cart">

</table>
<div>
  <p>
  </p>
  <container>Total amount: <item class="total-cart">0
    </item>
  </container>
  <p></p>
  <container>Number of Items: <item class="total-count">0
    </item>
  </container>
</div>

JavaScript

const shoppingCart = (function() {

    // =============================
    // Private methods and propeties
    // =============================
    let cart = [];
    // Constructor
    class Item {
      constructor(name, price, count, image) {
        this.name = name;
        this.price = price;
        this.count = count;
        this.image = image;
      }
    }
  
    // Save cart
    function saveCart() {
      localStorage.setItem('shoppingCart', JSON.stringify(cart));
    }
  
    // Load cart
    function loadCart() {
      cart = JSON.parse(localStorage.getItem('shoppingCart'));
    }
    if (localStorage.getItem("shoppingCart") != null) {
      loadCart();
    }
  
  
    // =============================
    // Public methods and propeties
    // =============================
    const obj = {};
  
    // Add to cart
    obj.addItemToCart = function(name, price, count, image) {
    debugger
      for (let item in cart) {
        if (cart[item].name === name) {
          cart[item].count += count ||  1
          saveCart();
          return;
        }
      }
      let item = new Item(name, price, count, image);
      cart.push(item);
      saveCart();
    }
    // Set count from item
    obj.setCountForItem = function(name, count) {
      for (let i in cart) {
        if (cart[i].name === name) {
          cart[i].count = count;
          break;
        }
      }
    };
    // Remove item from cart
    obj.removeItemFromCart = function(name) {
      for (let item in cart) {
        if (cart[item].name === name) {
          cart[item].count--;
          if (cart[item].count === 0) {
            cart.splice(item, 1);
          }
          break;
        }
      }
      saveCart();
    }
  
    // Remove all items from cart
    obj.removeItemFromCartAll = function(name) {
      for (let item in cart) {
        if (cart[item].name === name) {
          cart.splice(item, 1);
          break;
        }
      }
      saveCart();
    }
  
    // Clear...