Read here. Code on desktop. The coding workspace opens on screens 1024px and wider.
User interface challenge
Traffic Light
medium20 min
Build a traffic light that repeats the green → yellow → red cycle using predefined durations and illuminates exactly one light at a time.
Requirements
Start with green active. Repeat green for 3000ms, yellow for 1000ms, then red for 2000ms, indefinitely.
Keep exactly one active light. Set data-active="true"/"false" on the supplied red, yellow, and green lights and update data-color on the root data-testid="traffic-light".
Show the active color as Green, Yellow, or Red in the supplied data-testid="status" output. Keep the color text accessible; color alone is insufficient.
Use elapsed monotonic time to select the phase, so delayed timer callbacks do not accumulate drift. Refresh frequently enough to display a transition within 100ms of its boundary under normal active-tab conditions.
Clear timers when unmounted or when switching technology. No manual controls, pedestrian mode, or real-world safety system is involved.
The housing, circles, labels, and complete state-based CSS are supplied. Implement the timer and state logic without changing the supplied markup structure or CSS.
Examples
Example 1
Input: Wait through one six-second cycle.
Output: Green → Yellow → Red → Green, with one illuminated light.
The same visible behavior applies to every supported framework.
