Star Rating Component | HTML, CSS & JavaScript

Star Rating Component with HTML, CSS & JavaScript

30 DAYS 30 PROJECT CHALLENGE

Day #08

Project Overview

A Star Rating Component built using HTML, CSS, and JavaScript that allows users to rate an item by selecting stars.
The component provides real-time visual feedback on hover and saves the selected rating on click, making it suitable for reviews, feedback forms, and product rating systems.

Key Features

Interactive star-based rating system.
Real-time hover preview before selection.
Click to select and lock the rating.
Visual indication of active and inactive stars.
Displays selected rating value.
Clean, reusable, and responsive UI.
Easy to integrate into any web application.

HTML Code

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

  <div class="rating-container">
    <h2>Rate This Product</h2>

    <div class="stars" id="stars">
      <span class="star" data-value="1">★</span>
      <span class="star" data-value="2">★</span>
      <span class="star" data-value="3">★</span>
      <span class="star" data-value="4">★</span>
      <span class="star" data-value="5">★</span>
    </div>

    <p class="result" id="result">Rating: 0</p>
  </div>

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

CSS Code

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

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

.rating-container {
  background: #ffffff;
  padding: 30px;
  width: 320px;
  text-align: center;
  border-radius: 12px;
  box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

h2 {
  margin-bottom: 15px;
}

.stars {
  font-size: 32px;
}

.star {
  cursor: pointer;
  color: #d1d5db;
  transition: color 0.2s;
}

.star.active {
  color: #facc15;
}

.result {
  margin-top: 15px;
  font-size: 14px;
}

Javascript Code

const stars = document.querySelectorAll(".star");
const result = document.getElementById("result");

let rating = 0;

stars.forEach(star => {
  star.addEventListener("mouseover", () => {
    highlightStars(star.dataset.value);
  });

  star.addEventListener("mouseout", () => {
    highlightStars(rating);
  });

  star.addEventListener("click", () => {
    rating = star.dataset.value;
    result.innerText = `Rating: ${rating}`;
  });
});

function highlightStars(value) {
  stars.forEach(star => {
    star.classList.toggle("active", star.dataset.value <= value);
  });
}