Shopping Cart (Add / Remove / Total) | HTML, CSS & JavaScript

Shopping Cart (Add / Remove / Total) with HTML, CSS & JavaScript

30 DAYS 30 PROJECT CHALLENGE

Day #16

Project Overview

A Shopping Cart system built using HTML, CSS, and JavaScript that allows users to add and remove products while automatically calculating the total cost.
The project demonstrates real-time cart updates and basic state management commonly used in e-commerce applications.

Key Features

Add products to the cart dynamically.
Remove items from the cart instantly.
Real-time total price calculation.
Clean and user-friendly interface.
Responsive design for different screen sizes.
Easy to extend with quantities or checkout functionality.

HTML Code

<!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>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <div class="cart-container">
    <h2>Shopping Cart</h2>

    <!-- Products -->
    <div class="products">
      <div class="product">
        <span>Product A - ₹500</span>
        <button onclick="addToCart('Product A', 500)">Add</button>
      </div>

      <div class="product">
        <span>Product B - ₹300</span>
        <button onclick="addToCart('Product B', 300)">Add</button>
      </div>

      <div class="product">
        <span>Product C - ₹200</span>
        <button onclick="addToCart('Product C', 200)">Add</button>
      </div>
    </div>

    <!-- Cart -->
    <h3>Your Cart</h3>
    <ul id="cartList"></ul>

    <div class="total">
      Total: ₹<span id="totalPrice">0</span>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

CSS Code

* {
  box-sizing: border-box;
  font-family: "Segoe UI", sans-serif;
}

body {
  min-height: 100vh;
  background: #042453; /* Requested background */
  display: flex;
  justify-content: center;
  align-items: center;
}

.cart-container {
  background: #ffffff;
  width: 360px;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

h2, h3 {
  text-align: center;
  margin-bottom: 15px;
}

.products .product {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

button {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  background: #4f46e5;
  color: white;
  cursor: pointer;
  font-size: 13px;
}

ul {
  list-style: none;
  padding: 0;
  margin-top: 10px;
}

li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f3f4f6;
  padding: 8px;
  border-radius: 6px;
  margin-bottom: 8px;
  font-size: 14px;
}

.remove {
  background: #ef4444;
  padding: 4px 8px;
  font-size: 12px;
}

.total {
  margin-top: 15px;
  font-weight: bold;
  text-align: center;
}

Javascript Code

const cartList = document.getElementById("cartList");
const totalPriceEl = document.getElementById("totalPrice");

let cart = [];
let total = 0;

// Add item
function addToCart(name, price) {
  cart.push({ name, price });
  total += price;
  updateCart();
}

// Remove item
function removeItem(index) {
  total -= cart[index].price;
  cart.splice(index, 1);
  updateCart();
}

// Update cart UI
function updateCart() {
  cartList.innerHTML = "";

  cart.forEach((item, index) => {
    const li = document.createElement("li");
    li.innerHTML = `
      ${item.name} - ₹${item.price}
      <button class="remove" onclick="removeItem(${index})">Remove</button>
    `;
    cartList.appendChild(li);
  });

  totalPriceEl.innerText = total;
}