Challenge

Star Rating Widget

Easy

javascript
dom

Build a rating widget with five stars. Hovering over a star previews a rating by lighting it and every star before it. A click keeps that rating after the pointer moves away.

Notes:

The starter's #stars container is empty, so you create the five stars inside it.
Ratings are whole stars from 1 to 5. Half stars and clearing a rating are not needed.

Check your work against

5 stars are rendered
Hovering highlights the hovered star and every star before it
Moving the mouse away without clicking reverts to the last clicked rating (or empty if none yet)
Clicking locks in that rating even after the mouse leaves

No automatic grading

Check your work against the list above, then compare it with the solution preview.

Tab indents. Press Esc, then Tab to leave the editor.

Live preview

Starter loaded. The preview updates as you type.