Star Rating Component | HTML, CSS & JavaScript

Star Rating Component with HTML, CSS & JavaScript

30 DAYS 30 PROJECT CHALLENGE

Day #08

Project Overview

The Star Rating Component is a simple beginner-friendly project built using HTML, CSS, and JavaScript. It allows users to select a rating by clicking on stars. The selected rating is visually highlighted, making it easy for users to understand which rating they have chosen.

This type of rating system is commonly used on product pages, review websites, feedback forms, and other applications where users need to provide a quick rating. JavaScript handles user interaction and updates the appearance of the stars based on the selected value. This project is useful for beginners who want to practice click events, DOM manipulation, loops, CSS classes, and interactive user interface development.

Key Features

Interactive Star Selection: Users can click on a star to select their desired rating. The selected star and the stars before it are highlighted to represent the chosen rating.
Multiple Rating Levels: The component provides multiple stars, allowing users to select different rating values based on the number of stars available.
Dynamic Star Highlighting: JavaScript updates the appearance of the stars whenever the user selects a new rating, it clearly shows the current rating value.
Selected Rating Display: The application can display the selected rating as a number or message.
Click-Based Interaction: Each star responds to user clicks via JavaScript event listeners. The component is simple and interactive.
Active Star State: Selected stars can receive an active or similar CSS class that allows CSS to visually distinguish selected stars from unselected ones.
Change Rating Option: Users can click a different star at any time to update their previous rating without refreshing the webpage.
Simple and Clean Interface: The component focuses on a clean visual design so that users clearly understand how to select and change their rating.
Responsive Design: The Star Rating Component can adapt to different screen sizes, making it appropriate for desktops, tablets, and mobile devices.
Reusable Component: The rating functionality can be reused in product reviews, feedback forms, restaurant ratings, movie reviews, and many other web applications.

What You'll Learn

Understand how a star rating component works.
Learn how to handle click events using JavaScript.
Practice selecting multiple elements with querySelectorAll().
Understand how JavaScript can track a selected rating.
Learn how to use loops to update multiple elements.
Practice adding and removing CSS classes dynamically.
Understand how the index of an element can represent a rating value.
Learn how to update HTML content based on user interaction.
Practice creating active and inactive element states.
Understand how CSS can visually represent user input.

HTML Code

HTML creates the basic structure of the Star Rating Component. First, the style.css file is linked inside the <head> section so CSS can control the appearance and layout of the rating component. The main content is placed inside the main rating container, which holds the heading, stars, and rating information. Each star is created as an individual HTML element and can contain a data-value attribute or another identifier representing its rating value.

The stars are placed inside a container so they can be arranged and styled together. An additional text element can be included to display the rating selected by the user. Finally, the script.js file is loaded near the bottom of the <body> so JavaScript can select the stars, detect user interaction, and update the rating dynamically.

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

CSS controls the appearance and layout of the Star Rating Component. The main rating container is styled with suitable spacing, padding, width, background, and alignment to create a clean interface. These stars are styled with an appropriate font size and cursor pointer so users can clearly understand that they are clickable. Unselected stars have a default appearance, while selected stars receive a different style through an active class or another selector.

Hover effects can also provide visual feedback when users move the mouse over the stars. CSS transitions can make changes between selected and unselected states appear smoother. Responsive CSS rules can ensure that the rating component remains comfortable to use on smaller devices.

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

The JavaScript code provides the interactive functionality of the Star Rating Component. First, it selects all the star elements from the HTML and stores them in a collection. A click event listener is added to each star. When a user clicks on a star, JavaScript identifies its rating value or position and stores it as the currently selected rating.

The code then loops through all the stars and compares their values with the selected rating. Stars that belong to the selected rating range receive an active class, while the remaining stars have the class removed.

If the user selects another star, the same process runs again and updates the rating immediately. The selected rating can also be displayed in a text element. Overall, the project demonstrates how click events, loops, DOM manipulation, and CSS classes can be used to create an interactive Star Rating Component.

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