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

The Shopping Cart is a beginner-friendly project built using HTML, CSS, and JavaScript. It allows users to add products to a shopping cart, remove products from the cart, and automatically calculate the total price of all selected items. When a user clicks the Add button, JavaScript stores the selected product inside the cart and updates the total amount. The cart and total price update instantly without refreshing the webpage.

This project helps beginners understand how basic e-commerce functionality works. It introduces concepts such as arrays, objects, functions, event handling, DOM manipulation, and dynamic content updates.

Key Features

Add Products to Cart: Users can add available products to the shopping cart by clicking the Add button. JavaScript stores the product name and price inside the cart array.
Remove Cart Items: Every product added to the cart includes a Remove button. Users can click it to delete the selected product and update the cart instantly.
Automatic Total Calculation: It automatically adds the prices of selected products to calculate the total amount. The total is also updated when an item is removed.
Dynamic Cart Updates: JavaScript creates and displays cart items dynamically using DOM manipulation. Users can see changes immediately without refreshing the webpage.
Product Information: Each product contains its name and price, making it easy for users to understand what they are adding to their shopping cart.
Real-Time Interface Updates: The cart list and total price change immediately after adding or removing an item. This creates a more interactive shopping experience.
Simple and Clean Interface: This project uses a straightforward layout that separates the available products from the shopping cart. This makes the application easy for beginners to understand.
Responsive Design: Shopping Cart can be displayed on different screen sizes. The simple layout remains comfortable to use on desktop, tablet, and mobile devices.
Easy to Extend: Developers can add features such as product quantities, increasing or decreasing items, local storage, discounts, and checkout functionality.

What You'll Learn

Understand how JavaScript arrays can store cart items.
Learn how JavaScript objects store product information.
Practice adding items to an array using .push().
Understand how .splice() removes items from an array.
Learn how to dynamically create HTML elements.
Practice using document.createElement().
Understand how forEach() loops through cart items.
Learn how to update HTML using innerHTML.
Practice updating values dynamically with JavaScript.
Understand how functions organize application logic.
Learn how to calculate and update a total price.

HTML Code

HTML creates the structure of the Shopping Cart application. First, the style.css file is linked inside the <head> section so CSS can control the appearance and layout of the project. The main content is placed inside the .cart-container, which contains the product list, shopping cart, and total price.

Each product displays its name and price along with an Add button and the Add buttons call the addToCart() function and pass the product name and price as arguments, <ul> element with the ID cartList acts as the container where JavaScript dynamically displays the products added to the cart and the totalPrice element displays the current total cost of all selected products. Finally, the script.js file is loaded at the bottom of the <body> so JavaScript can access the HTML elements and manage the shopping cart functionality.

<!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

CSS controls the appearance and layout of the Shopping Cart. The body uses Flexbox to center the .cart-container on the page, while the main container uses a white background, padding, rounded corners, and a shadow to create a clean card-style interface.

Product rows of this project uses Flexbox to position the product information and Add buttons. Cart items are also styled as separate rows, while the Remove button uses a different style to make the delete action easy to identify and the total section displays the final price clearly at the bottom of the cart.

* {
  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

JavaScript handles adding and removing products from the Shopping Cart and calculating the total price. First, it selects the cart list and total price elements using document.getElementById(). The cart array stores the selected products, while the total variable keeps track of the combined price.

The addToCart() function receives a product name and price, adds the product to the cart array using .push(), increases the total price, and then calls updateCart(). When a user clicks Remove, the removeItem() function subtracts the selected product’s price from the total and removes it from the array using .splice().

Finally, the updateCart() function clears the existing cart display and loops through the cart array using forEach(). It dynamically creates each cart item and its Remove button, then updates the displayed total price. This allows the Shopping Cart to update instantly whenever products are added or removed.

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;
}