Interactive Star Rating

Published at 15 Jun 2026

Description
Explains what the challenge is about and what you need to build.

From product reviews to feedback forms, the star rating is a staple of interactive widgets. In the Interactive Star Rating challenge, you will design a 5-star selector. The stars must dynamically highlight as the user hovers over them. Clicking on a star locks the selection value and updates the rating display label.

Ensure that hovering over a lower star dims the higher ones, and moving the cursor away resets the highlights to the locked rating value.

Requirements
Lists the specific elements, IDs, and behaviors your solution must include to pass the tests.

Five star elements with class .star-btn.
Display text span with ID #rating-value.
Active filled stars must be given the class .filled.
Hovering over a star must temporarily fill all stars up to that index. Moving mouse out must restore to the last locked rating value.
Clicking a star must lock the rating, updating the text inside #rating-value.

Example Demo

User Flow

Step-by-step Flow Explanation:

Hover Indicator: User hovers over the third star; the first, second, and third stars highlight.
Click Lock: User clicks the star; the rating locks at 3, updating the numeric feedback span.
Mouse Out: User moves the mouse cursor away; the stars remain highlighted up to the locked index (3).

Related UI Challenges

Component UI

Discussion (0)

Join the Discussion

index.html

style.css

script.js

Loading Monaco Workspace...

Live Preview Browser

Tests & Console Output

Click to expand

Test Assertion	Status	Details/Errors
Required DOM Elements exist (.star-btn, #rating-value, .filled)	Pending	Pending execution
Component layout compiles and renders successfully with custom CSS styles	Pending	Pending execution
Interactive JavaScript logic and event listeners are implemented	Pending	Pending execution