React · Exercise 5 of 5 Previous
Beginner
Mini build: a mood picker
Build a mood picker with three buttons labelled Happy, Calm and Sad, and a paragraph with id="mood".
At the start the paragraph says You feel: nothing yet. Clicking a button changes it to You feel: Happy (or Calm, or Sad).
The chosen button has aria-pressed="true"; the other two have aria-pressed="false". (Screen readers announce aria-pressed buttons as toggle buttons.)
What Check tests
- There are three buttons: Happy, Calm and Sad
- It starts with
You feel: nothing yet - Clicking Calm shows
You feel: Calm - Only the chosen button has
aria-pressed="true" - Choosing again moves the selection
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.