Read here. Code on desktop. The coding workspace opens on screens 1024px and wider.
User interface challenge
Digital Clock
medium30 min
Build a responsive seven-segment digital clock that displays the current local time in 24-hour HH:MM:SS format and keeps it up to date.
Requirements
Read the actual local time on mount and refresh at least every second. Use Date values rather than counting elapsed ticks, so minute/hour/day rollovers follow the clock.
Keep data-testid="clock", data-time="HH:MM:SS", role="img", and aria-label matching the displayed time. Render six zero-padded digits with two visual colon separators; do not announce every tick with aria-live.
Each digit has data-digit equal to its number and seven distinct segments data-segment="a" through "g". Set data-on="true" only for the segments lit by that digit. Segment positions are a top, b upper-right, c lower-right, d bottom, e lower-left, f upper-left, and g middle.
Implement every digit 0–9 correctly, including the supplied digit reference samples. Keep decorative segments hidden from assistive technology.
Complete the separate CSS file to position horizontal and vertical segments, illuminate active segments, preserve proportions responsively down to 320px, and respect reduced motion. Keep this styling in the CSS file.
The segment markup and sample scaffold are supplied. Clear the timer when the component is destroyed. No date, time-zone selector, alarm, or server synchronization is needed.
Examples
Example 1
Input: Mount the clock.
Output: Current local HH:MM:SS rendered with seven segments per digit.
The same visible behavior applies to every supported framework.
What the tests check
Shows the actual local time
Clock stays synchronized
Six digits with seven segments each
All ten segment patterns
Segments occupy the correct positions
One accessible label without per-second announcements
