Interactive Star Rating

Published at 15 Jun 2026

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

Build an interactive star rating where hovering highlights stars up to the hovered index and clicking locks in a rating.

Display 5 stars. Hovering fills stars up to the hovered one; clicking selects that rating and keeps it filled.

Implement hover and click handlers that update the filled state of each star.

Show the selected rating value.

Test hover highlight and click selection.

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.

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).

Ask questions, share solutions & tips

0 Comments

No comments yet

Be the first to share your approach or ask a question!

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