Analog Clock
Problem statement
An Analog Clock is a React question that tests your understanding of setInterval cleanup, trigonometry for positioning clock hands, and derived state from a Date object. Your task is to build a working analog clock that displays the current time with hour, minute, and second hands that rotate in real-time.
The challenge is translating real-world clock mechanics into CSS transforms. Clock hands rotate around a central pivot point, and each hand's rotation angle must be derived correctly from the current time — with the hour hand accounting for minutes (it doesn't jump on the hour, it moves continuously), the minute hand accounting for seconds, and the second hand moving in 1-second steps. Getting these angles right is the core mathematical challenge of this question.
Requirements & constraints
- Display three clock hands: hour, minute, and second
- Hands rotate correctly based on the current time
- Clock updates every second (real-time)
- Hour hand moves continuously (accounts for minutes, not just hours)
- Minute hand moves continuously (accounts for seconds, not just minutes)
- Visual clock face with 12 tick marks
- Display the digital time below the clock face
How to approach Analog Clock
The strategy an interviewer expects you to reach for.
Problem Understanding The analog clock has one critical insight: only one piece of state. The entire clock is driven by a single Date object that gets replaced every second. All three rotation angles are derived from this date in pure math — there's no separate angle state for each hand.
The full solution is part of HelloFrontend Pro
The question above is free to read in full. Upgrade to unlock the interactive workspace and the senior-level walkthrough that go with it.
- Live React sandbox pre-wired for this component
- Time-boxed checkpoints that mirror a real 45-minute round
- Interviewer scoring criteria and a full reference implementation
Already a member? Log in to open the workspace.