Star Rating using HTML CSS and JavaScript (original) (raw)

Last Updated : 02 Jun, 2025

Star rating is a way to give a rating to the content to show its quality or performance in different fields. This article will demonstrate how to create a star rating project using JavaScript.

Project Preview:

Prerequisites

• HTML
• CSS
• JavaScript

**Step-by-Step Guide to Building a Star Rating System

• Create the basic structure using HTML entities, divs, and spans along with the corresponding class names. Using CSS styling properties, style the components with CSS properties like display, color, font size, margin, padding, and border for respective classes.
• In JavaScript access the html element using a _document.getElementByClass name to get the list of span elements and _getElementById.
• Use _onclick attribute as an event listener to call the function according to the no. of star clicked.
• Remove already applied CSS by calling the remove method.
• Update the color of the stars and the output corresponding to the author's action.

**Example: In this example, we will create the star rating with the above approach.

index.html `

style.css

/* style.css */

• { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 50vh; display: flex; align-items: center; text-align: center; justify-content: center; background: hsl(137, 46%, 24%); font-family: "Poppins", sans-serif; } .card { max-width: 33rem; background: #fff; margin: 0 1rem; padding: 1rem; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); width: 100%; border-radius: 0.5rem; } .star { font-size: 10vh; cursor: pointer; } .one { color: rgb(255, 0, 0); } .two { color: rgb(255, 106, 0); } .three { color: rgb(251, 255, 120); } .four { color: rgb(255, 255, 0); } .five { color: rgb(24, 159, 14); }

index.js

// script.js

// To access the stars let stars = document.getElementsByClassName("star"); let output = document.getElementById("output");

// Funtion to update rating function gfg(n) { remove(); for (let i = 0; i < n; i++) { if (n == 1) cls = "one"; else if (n == 2) cls = "two"; else if (n == 3) cls = "three"; else if (n == 4) cls = "four"; else if (n == 5) cls = "five"; stars[i].className = "star " + cls; } output.innerText = "Rating is: " + n + "/5"; } // To remove the pre-applied styling function remove() { let i = 0; while (i < 5) { stars[i].className = "star"; i++; } }

`

**Output:

Star Rating using HTML CSS and JavaScript