Intermediate
Add a pause button that obeys reduced motion
The cube spins forever and the button does nothing. Make the button (#pause) stop and resume the spin, with the label "Pause animation" or "Resume animation".
Also respect prefers-reduced-motion: reduce: if it is set when the page loads, the cube must start still and the label must say "Play animation".
What Check tests
- The cube spins at first
- Pressing the button stops it and changes the label
- Pressing it again resumes
- The code reads prefers-reduced-motion
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.