Untitled

<!DOCTYPE html>
<html>
  <head>
    <title>9i</title>
  </head>
  
  <body>
    <!--
    '++' and '+=' and 'variable = variable +1' are all the same thing'.

    Variable Re-assignment Shortcuts:

    +=      variable = variable + 2
    -=      variable = variable - 2
    *=      variable = variable * 2
    /=      variable = variable / 2
    ++      variable = variable + 1
    --      variable = variable - 1
    -->

    <p>
      Cart Quantity 9i
    </p>

    <button onclick="
      console.log(`Cart quantity: ${cartQuantity}`);
    ">
      Show Quantity
    </button>

    <button onclick="
      updateCartQuantity(1);
    ">
      Add to Cart
    </button>

    <button onclick="
      updateCartQuantity(2);
    ">
      +2
    </button>

    <button onclick="
      updateCartQuantity(3);
  ">
      +3
    </button>

    <button onclick="
     updateCartQuantity(4);
  ">
      +4
    </button>

    <button onclick="
      updateCartQuantity(5);
  ">
      +5
    </button>

    <button onclick="
      updateCartQuantity(-1);
  ">
      Remove from cart
    </button>

    <button onclick="
      updateCartQuantity(-2);
  ">
      -2
    </button>

    <button onclick="
      updateCartQuantity(-3);
  ">
      -3
    </button>

    <button onclick="
      resetCart(0);
      
  ">
      Reset Cart
    </button>

    <p class="quantity-display"></p>

    <script>
      let cartQuantity = 
      JSON.parse(localStorage.getItem('cart quantity')) || 0;

          
      document.querySelector('.quantity-display')
      .innerText = `Cart quantity: ${cartQuantity}`;
    


      function updateCartQuantity(numberOperator) {
          cartQuantity += numberOperator;

          console.log(`Cart quantity: ${cartQuantity}`);

          if (cartQuantity > 10) {         
            cartQuantity  
          alert('Your cart is full.');
          return;
        } else if (cartQuantity < 0) {
          alert('Your cart is empty.');
          return;
          console.log(`Cart quantity: ${cartQuantity}`);
        }

        localStorage.setItem('cart quantity', JSON.stringify(cartQuantity));

        updateCartQuantityDisplay();
        addLimited();

        document.querySelector('.quantity-display')
        .innerText = `Cart quantity: ${cartQuantity}`;
      }

      function updateCartQuantityDisplay() {
        document.querySelector('.quantity-display')
          .innerHTML =  `Cart quantity: ${cartQuantity}`;
      }

      function addLimited(cartQuantity, numberOperator) {
        const maxLimit = 10;
        const remainingCapacity = maxLimit - cartQuantity;

        if (numberOperator <= remainingCapacity) {
          return cartQuantity + numberOperator;
        } else {
          return maxLimit;
        }
      }

      function resetCart() {
        cartQuantity = 0;
        
        document.querySelector('.quantity-display')
        .innerText = `Cart quantity: ${cartQuantity}
        Cart was reset.`;
      }
    </script>
  </body>
</html>
Editor is loading...