A teammate left you a half-finished analog clock widget. The preview renders, but the hands do not behave correctly:
- The second hand never appears - its rotation angle was never implemented (
getHandAngles still returns the placeholder null).
- The hour hand jumps between hour marks instead of gliding smoothly - it ignores how many minutes have elapsed since the top of the hour.
Your job: make every hand point where it should for any given time, then confirm the preview shows a working clock.
Codebase tour
src/utils/getHandAngles.js - the heart of the exercise. A pure function that converts a Date into hand rotation angles: it returns { hourDeg, minuteDeg, secondDeg }, each measured clockwise from 12 o'clock in the range [0, 360). Nothing here touches the DOM or timers, so the whole math can be unit-tested directly with fixed Date values.src/components/AnalogClock.jsx - renders the SVG clock face and rotates each hand using getHandAngles. The second hand is only painted once its angle is a real number.src/components/DigitalReadout.jsx + src/utils/formatTime.js - a plain HH:MM:SS readout beneath the clock.src/hooks/useNow.js - keeps now ticking once per second; src/App.jsx wires it all together.
Rotation math (reference)
- Second hand: 360 degrees in 60 seconds -> 6 degrees per second.
- Minute hand: 360 degrees in 60 minutes -> 6 degrees per minute.
- Hour hand: 360 degrees in 12 hours -> 30 degrees per hour, plus 0.5 degrees per elapsed minute so it glides between hour marks (e.g. at 1:30 it should point at 45 degrees, halfway between the 1 and 2 marks).
Date#getHours() is 0-23, so use hours % 12 so that 12 and 24 behave as 0 on the dial. At 12:00:00 every hand must return 0, never 360.
What to do
- Implement the second hand rotation in
getHandAngles.js (replace the null stub with the real formula).
- Fix the hour hand so it advances fractionally with elapsed minutes.
Acceptance criteria
npm test (Vitest) passes - the suite tests getHandAngles with fixed dates plus a smoke test that the preview still mounts.- The preview renders a working analog clock; once all tests pass, the second hand is visible and the hour hand glides smoothly.