Star Rating

Build a rating component with five stars. You practice choosing the minimal state: one number from which everything else is deduced.

• The complete interface: the five stars and the rating text.
• Your job is the logic: store the rating and deduce from it which stars are marked and which text is shown.
• Keep the aria-labels (1 star, 2 stars...) and the role="status": the tests use them.

• At the start there is no rating and the text says Not rated.
• Pressing a star changes the text to N of 5 with that star's number.
• If you press another star, the rating changes to the new one.
• If you press the star of the current rating again, the rating is cleared and the text goes back to Not rated.
• A marked star shows ★ and has aria-pressed="true"; an unmarked one shows ☆ and aria-pressed="false".

• You open the challenge → you see Not rated.
• You press 4 stars → you see 4 of 5.
• You press 2 stars → you see 2 of 5.
• You press 2 stars again → you see Not rated.

• Minimal state: store a number, not an array.
• Derived state instead of duplicated state.
• aria-pressed for controls that toggle on and off.