E-commerce Product Page UI | HTML CSS JavaScript

E-commerce Product Page with HTML, CSS & JavaScript

40 DAYS 40 PROJECT CHALLENGE

Day #03

Project Overview

A modern E-commerce Product Page built using HTML, CSS, and JavaScript with a clean and responsive design. The page allows users to view product images, check pricing details, select size or quantity, and interact with add-to-cart functionality. It demonstrates key frontend concepts like product galleries, responsive layouts, and interactive UI elements used in real-world e-commerce websites.

Key Features

Product image gallery with thumbnail preview
Responsive layout for desktop and mobile devices
Product details including price, rating, and description
Size or variation selection for products
Quantity selector with increase and decrease buttons
Add to Cart and Wishlist functionality
Clean and modern UI design
Interactive elements using JavaScript

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Modern Product Page</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="wrapper">
  <div class="product-card">

    <!-- LEFT SIDE -->
    <div class="left">
      <img id="mainImage" src="https://picsum.photos/500?1" class="main-img">

      <div class="thumbnails">
        <img src="https://picsum.photos/500?1" onclick="changeImage(this)">
        <img src="https://picsum.photos/500?2" onclick="changeImage(this)">
        <img src="https://picsum.photos/500?3" onclick="changeImage(this)">
        <img src="https://picsum.photos/500?4" onclick="changeImage(this)">
      </div>
    </div>

    <!-- RIGHT SIDE -->
    <div class="right">
      <h2>Premium Sneakers</h2>
      <p class="rating">⭐ 4.5</p>
      <p class="price">₹2,499</p>

      <p class="description">
        Lightweight premium sneakers built for comfort and everyday style.
        Breathable material with durable sole for long-lasting performance.
      </p>

      <!-- SIZE -->
      <div class="sizes">
        <p>Size:</p>
        <button class="size-btn">6</button>
        <button class="size-btn">7</button>
        <button class="size-btn">8</button>
        <button class="size-btn">9</button>
      </div>

      <!-- QUANTITY -->
      <div class="quantity">
        <button onclick="decreaseQty()">−</button>
        <input type="number" id="qty" value="1" min="1">
        <button onclick="increaseQty()">+</button>
      </div>

      <!-- BUTTONS -->
      <div class="actions">
        <button class="primary" onclick="addToCart()">Add to Cart</button>
        <button class="secondary" onclick="addToWishlist()">Wishlist</button>
      </div>

    </div>
  </div>
</div>

<!-- CART PANEL -->
<div class="side-panel" id="cartPanel">
  <div class="panel-header">
    <h3>Cart</h3>
    <button onclick="closeCart()">✕</button>
  </div>
  <div id="cartItems"></div>
</div>

<!-- WISHLIST PANEL -->
<div class="side-panel" id="wishlistPanel">
  <div class="panel-header">
    <h3>Wishlist</h3>
    <button onclick="closeWishlist()">✕</button>
  </div>
  <div id="wishlistItems"></div>
</div>

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

CSS Code

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  background: #042354;
}

.wrapper {
  display: flex;
  justify-content: center;
  padding: 60px 20px;
}

.product-card {
  max-width: 1000px;
  width: 100%;
  background: #fff;
  border-radius: 14px;
  display: flex;
  gap: 50px;
  padding: 40px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* LEFT */
.left {
  flex: 1;
}

.main-img {
  width: 100%;
  max-width: 420px;
  border-radius: 12px;
}

.thumbnails {
  display: flex;
  gap: 12px;
  margin-top: 15px;
}

.thumbnails img {
  width: 75px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.2s;
}

.thumbnails img:hover {
  transform: scale(1.05);
}

/* RIGHT */
.right {
  flex: 1;
}

.rating {
  color: #f59e0b;
  font-weight: 600;
  margin: 8px 0;
}

.price {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 15px;
}

.description {
  color: #555;
  line-height: 1.6;
  margin-bottom: 20px;
}

/* SIZE */
.sizes {
  margin-bottom: 20px;
}

.size-btn {
  padding: 8px 14px;
  margin-right: 10px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
  border-radius: 6px;
  transition: 0.2s;
}

.size-btn.active {
  background: #111;
  color: #fff;
  border-color: #111;
}

/* QUANTITY */
.quantity {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
}

.quantity button {
  width: 35px;
  height: 35px;
  border: none;
  background: #111;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

.quantity input {
  width: 60px;
  text-align: center;
  height: 35px;
  border: 1px solid #ddd;
}

/* BUTTONS */
.actions button {
  padding: 12px 20px;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  font-weight: 600;
}

.primary {
  background: #111;
  color: #fff;
  margin-right: 10px;
}

.secondary {
  background: #eee;
}

/* SIDE PANEL */
.side-panel {
  position: fixed;
  top: 0;
  right: -350px;
  width: 320px;
  height: 100%;
  background: #fff;
  padding: 20px;
  box-shadow: -5px 0 20px rgba(0,0,0,0.1);
  transition: 0.3s;
  overflow-y: auto;
}

.side-panel.active {
  right: 0;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-item {
  margin: 20px 0;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.cart-item button {
  background: crimson;
  color: #fff;
  border: none;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
}

/* RESPONSIVE */
@media(max-width: 768px) {
  .product-card {
    flex-direction: column;
    padding: 25px;
  }
}

Javascript Code

let cart = [];
let wishlist = [];
const price = 2499;
let selectedSize = null;

/* IMAGE CHANGE */
function changeImage(img) {
  document.getElementById("mainImage").src = img.src;
}

/* SIZE SELECTION */
const sizeButtons = document.querySelectorAll(".size-btn");

sizeButtons.forEach(button => {
  button.addEventListener("click", function () {
    sizeButtons.forEach(btn => btn.classList.remove("active"));
    this.classList.add("active");
    selectedSize = this.innerText;
  });
});

/* QUANTITY */
function increaseQty() {
  let qty = document.getElementById("qty");
  qty.value = parseInt(qty.value) + 1;
}

function decreaseQty() {
  let qty = document.getElementById("qty");
  if (qty.value > 1) {
    qty.value = parseInt(qty.value) - 1;
  }
}

/* ADD TO CART */
function addToCart() {
  if (!selectedSize) {
    alert("Please select a size");
    return;
  }

  let qty = parseInt(document.getElementById("qty").value);

  cart.push({
    name: "Premium Sneakers",
    size: selectedSize,
    qty: qty,
    total: qty * price
  });

  updateCart();
  document.getElementById("cartPanel").classList.add("active");
}

/* UPDATE CART */
function updateCart() {
  let cartItems = document.getElementById("cartItems");
  cartItems.innerHTML = "";

  cart.forEach((item, index) => {
    cartItems.innerHTML += `
      <div class="cart-item">
        <p><strong>${item.name}</strong></p>
        <p>Size: ${item.size}</p>
        <p>Qty: ${item.qty}</p>
        <p>Total: ₹${item.total}</p>
        <button onclick="removeFromCart(${index})">Remove</button>
      </div>
    `;
  });
}

/* REMOVE FROM CART */
function removeFromCart(index) {
  cart.splice(index, 1);
  updateCart();
}

/* CLOSE CART */
function closeCart() {
  document.getElementById("cartPanel").classList.remove("active");
}

/* WISHLIST */
function addToWishlist() {
  wishlist.push("Premium Sneakers");
  updateWishlist();
  document.getElementById("wishlistPanel").classList.add("active");
}

function updateWishlist() {
  let wishlistItems = document.getElementById("wishlistItems");
  wishlistItems.innerHTML = "";

  wishlist.forEach((item, index) => {
    wishlistItems.innerHTML += `
      <div class="cart-item">
        <p>${item}</p>
        <button onclick="removeFromWishlist(${index})">Remove</button>
      </div>
    `;
  });
}

function removeFromWishlist(index) {
  wishlist.splice(index, 1);
  updateWishlist();
}

function closeWishlist() {
  document.getElementById("wishlistPanel").classList.remove("active");
}