Traffic Light
Medium · Timers
Build a traffic light that changes by itself.
Render <div className="light"> with a data-color attribute and a text label. The colors cycle in this order, each lasting a fixed time:
- data-color="green" with the text "Green" for 300ms
- data-color="yellow" with the text "Yellow" for 200ms
- data-color="red" with the text "Red" for 300ms, then back to green
The light starts green when the component mounts.
Add a button "Pause". While paused the light does not change and the button says "Resume". When resumed, the current color starts its full duration again.
Clean up your timer in the useEffect cleanup function.