1. Cart Quantity Project
In this project, you'll learn how to dynamically update and manage the cart quantity using JavaScript. The project involves several buttons, each with its own functionality to modify the cart quantity.
2. Key Concepts:
onclick attribute)
3. The Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cart Quantity</title>
</head>
<body>
<button onclick="cartQuantity = cartQuantity;
console.log(`Cart Quantity is ${cartQuantity}`);">Cart Quantity</button>
<button onclick="cartQuantity++;
console.log(`Cart Quantity is ${cartQuantity}`);">Add to Cart</button>
<button onclick="cartQuantity = cartQuantity +2;
console.log(`Cart Quantity is ${cartQuantity}`); ">+2</button>
<button onclick="cartQuantity += 3;
console.log(`cart Quantity is ${cartQuantity}`)">+3</button>
<button onclick="cartQuantity = cartQuantity*0;
console.log(`Cart Quantity is ${cartQuantity}`)">Reset Cart</button> <script defer src="data:text/javascript;base64,DQogICAgICAgIGxldCBjYXJ0UXVhbnRpdHkgPSAwOw0KICAgIA=="></script> </body>
</html>
4. Project Breakdown:
1: Cart Quantity Display Button:
- A button to display the current quantity of items in the cart.
- This uses
console.logto show the value of thecartQuantityvariable.
- This button increases the cart quantity by 1 each time it’s clicked using the
++increment operator.
- Increases the cart quantity by 2 each time it’s clicked.
- Uses the addition assignment operator (
+=).
- Increases the cart quantity by 3 using a similar addition assignment technique.
- Resets the cart quantity to 0 by multiplying the current quantity by 0.
5: JavaScript code:
let cartQuantity = 0; // Initializing the cart quantity
Each button is designed to interact with this variable to modify it. The
console.log statements in each button allow you to view the updated quantity in the browser's console.
6. Learning Outcomes:
7. Conclusion