Shopping Cart Source Code

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shopping Cart</title>
</head>

<body>
    <div class="container">
        <h1>🛒 Shopping Cart</h1>
        <div class="wrapper">
            <div class="products-section">
                <h2>Products</h2>
                <div class="products-list" id="productsGrid"></div>
            </div>

            <div class="cart-section">
                <h2>Your Cart</h2>
                <div class="cart-items" id="cartItems"></div>

                <div class="summary">
                    <p>Subtotal: <span id="subtotal">₹0</span></p>
                    <p>Tax (10%): <span id="tax">₹0</span></p>
                    <h3>Total: <span id="total">₹0</span></h3>
                </div>

                <button onclick="clearCart()">Clear Cart</button>
                <button onclick="checkout()">Checkout</button>
            </div>
        </div>
    </div>
</body>
</html>

JavaScript Code

Product Array

const products = [
    { id: 1, name: "Laptop", icon: "💻", price: 50000 },
    { id: 2, name: "Mobile", icon: "📱", price: 20000 },
    { id: 3, name: "Headphones", icon: "🎧", price: 5000 },
    { id: 4, name: "Tablet", icon: "📱", price: 25000 },
    { id: 5, name: "Watch", icon: "⌚", price: 10000 }
];

let cart = [];

Render Products Function

function renderProducts() {
    const grid = document.getElementById("productsGrid");
    grid.innerHTML = products.map(product => `
        <div class="product">
            <div>${product.icon}</div>
            <h3>${product.name}</h3>
            <p>₹${product.price}</p>
            <button onclick="addToCart(${product.id})">Add to Cart</button>
        </div>
    `).join("");
}

What it does: Creates HTML card for each product and adds them to the grid

Add to Cart Function

function addToCart(productId) {
    const product = products.find(p => p.id === productId);
    const existingItem = cart.find(item => item.id === productId);

    if (existingItem) {
        existingItem.quantity++;
    } else {
        cart.push({
            id: product.id,
            name: product.name,
            icon: product.icon,
            price: product.price,
            quantity: 1
        });
    }

    updateCart();
}

Logic: If product exists in cart, increase quantity. Otherwise, add new item with quantity 1.

Update Cart Function

function updateCart() {
    const cartItems = document.getElementById("cartItems");

    if (cart.length === 0) {
        cartItems.innerHTML = "<p>Cart is empty</p>";
        document.getElementById("subtotal").textContent = "₹0";
        document.getElementById("tax").textContent = "₹0";
        document.getElementById("total").textContent = "₹0";
        return;
    }

    cartItems.innerHTML = cart.map((item, index) => `
        <div class="cart-item">
            <span>${item.icon} ${item.name}</span>
            <span>₹${item.price} x ${item.quantity}</span>
            <button onclick="removeFromCart(${item.id})">Remove</button>
        </div>
    `).join("");

    // Calculate totals
    const subtotal = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
    const tax = subtotal * 0.1;
    const total = subtotal + tax;

    document.getElementById("subtotal").textContent = "₹" + subtotal;
    document.getElementById("tax").textContent = "₹" + tax.toFixed(2);
    document.getElementById("total").textContent = "₹" + total.toFixed(2);
}

Remove from Cart

function removeFromCart(productId) {
    cart = cart.filter(item => item.id !== productId);
    updateCart();
}

What it does: Removes product from cart and refreshes the display

Clear Cart & Checkout

function clearCart() {
    if (cart.length > 0) {
        cart = [];
        updateCart();
    }
}

function checkout() {
    if (cart.length > 0) {
        alert("Thank you for shopping!");
        cart = [];
        updateCart();
    }
}

Key Concepts

Array Methods Used

map(): Convert products to HTML cards
find(): Search for specific product in array
filter(): Remove item from cart
reduce(): Calculate total price

Price Calculations

Calculation	Formula	Example
Item Total	price × quantity	₹5000 × 2 = ₹10000
Subtotal	Sum of all items	₹10000 + ₹20000 = ₹30000
Tax	Subtotal × 0.10	₹30000 × 0.10 = ₹3000
Total	Subtotal + Tax	₹30000 + ₹3000 = ₹33000

Learning Points

DOM manipulation with getElementById
Array methods (map, find, filter, reduce)
Event handling with onclick
Template literals for HTML generation
State management with cart array
Real-time calculations