lesson-07/Exercise-7h.html

<!-- in this lesson: -->
<!-- ------------------- -->
<!-- 

    Lesson 7 : Functions
    
    Exercise - 7h  Add-to-cart  Function -> updateCartQuantity()
   
-->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Add to cart</title>
    <style>
        body {
            text-align: center;
        }

        button {
            cursor: pointer;
            font-size: 20px;
            height: 40px;
            min-width: 50px;
            padding: 0 10px;
            background-color: white;
            color: black;
            border: 2px solid black;
            transition: all 0.1s linear;
            margin: 5px;
        }

        button:hover {
            background-color: black;
            color: white;
        }
    </style>
</head>

<body>

    <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(-2);
    ">
        -2
    </button>
    <button onclick="
        updateCartQuantity(-3)
    ">
        -3
    </button>
    <button onclick="
        cartQuantity = 0;
        console.log('Cart was reset');
        console.log(`Cart Quantity : ${cartQuantity}`);
    ">
        Reset Cart
    </button>


    <script>

        let cartQuantity = 0;

        function updateCartQuantity (change)
        {
            if (cartQuantity + change > 10) {
                alert('The cart is full');
            }
            else if (cartQuantity + change < 10) {
                alert('You can add more items in your cart');
            }
            else {
                cartQuantity += change;
                console.log(`cart quantity : ${ cartQuantity }`);
            }

        }

    </script>
</body>

</html>