React · Exercise 1 of 5Next
Beginner
A status pill with conditional classes
Make the button with id="status" toggle between online and offline when clicked. It starts online.
Online: text Online and className pill pill--online. Offline: text Offline and className pill pill--offline. The CSS is ready in the CSS tab.
What Check tests
- It starts as
Onlinewith the classespill pill--online - The online pill is green
- One click shows
Offlinewithpill pill--offline - The offline pill is red
- Another click goes back to
Online
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.