Build an Analog Clock

Question

Accepted Answer

## Building an Analog Clock in React

**Mental model:** Read the current time on a 1-second interval, convert hours/minutes/seconds to rotation angles, and rotate three SVG hands. The only math is degrees-per-unit; SVG `transform="rotate(deg cx cy)"` does the rest. Clean up the interval on unmount.

### Step 1 — Tick the time into state
```jsx
const [now, setNow] = useState(new Date());
useEffect(() => {
  const id = setInterval(() => setNow(new Date()), 1000);
  return () => clearInterval(id);
}, []);
```

### Step 2 — Convert time to angles
Include the fractional carry so the hour hand drifts with the minutes.

```jsx
const s = now.getSeconds();
const m = now.getMinutes();
const h = now.getHours() % 12;
const secDeg = s * 6;            // 360 / 60
const minDeg = m * 6 + s * 0.1;  // minute + seconds carry
const hourDeg = h * 30 + m * 0.5; // 360 / 12 + minute carry
```

### Step 3 — Rotate SVG hands
```jsx
<line x1="50" y1="50" x2="50" y2="20" transform={`rotate(${hourDeg} 50 50)`} /

Build an Analog Clock

Understand the problem

Attempt it yourself

Stuck? AI Nudge Available

Study the solution

The solution is waiting

React solution

Join the discussion

Discussion (0)