Build a Digital Clock | Interview Question

Q: Build a Digital Clock

**Target Audience:** Beginners preparing for a frontend machine coding round. You know a little JavaScript and have seen a React component; timers and effects are explained from zero. **Difficulty:** Easy > **How to read this doc:** Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the words an interviewer listens for. Every output quoted under "Verified" was printed by actually running the solution below on React 19.3.1 in jsdom, plus one measurement in real Chromium 141. ## 1. Why This Even Matters — A Story First Picture a wall clock with a cheap motor. Every second the motor gives the hands a nudge. If the battery is weak, a nudge comes a little late, and the clock never makes up for it: by the end of the week it is three minutes slow. That clock *counts nudges*. Now picture a clock that, every second, glances at a radio time signal and simply shows whatever the signal says. If one glance is late, the next glance

The problem

Question presented to candidate: "Build a digital clock widget that shows the current time and updates every second. Users should be able to switch between 24-hour and 12-hour (AM/PM) format. Keep it accurate: if I leave it open for an hour, it should still match my system clock to the second."

Requirements:

Show HH:MM:SS, every unit zero-padded, plus the current date.
A toggle between 24-hour and 12-hour format (12-hour shows 12 for midnight and noon, never 00, plus AM/PM).
The display changes as close to the real second boundary as possible and never drifts.
No timers left running after the clock unmounts.

What a strong answer should cover:

The source of truth is the system clock: every tick reads new Date() instead of adding 1 to a counter, so a late or skipped tick cannot accumulate as drift.
Scheduling: a setTimeout aimed at the next second boundary (1000 - now % 1000) instead of a free-running setInterval(1000) started at an arbitrary millisecond.
Cleanup: clearing the timer on unmount, and why React StrictMode in development runs the effect twice (mount, cleanup, mount).
Formatting as a pure function (Date + format flag in, strings out): padStart, h % 12 || 12, AM/PM.
State model: the format flag is state; the formatted strings are derived, not stored.
Accessibility: a semantic <time datetime> element, no aria-live announcing every second, and a toggle button with aria-pressed.

Clarifying questions expected:

"Local time only, or should it support other time zones?"
"Does it need seconds, or would minute precision be enough (which changes how often it renders)?"
"Should the 12/24-hour choice follow the user locale or be a manual toggle?"

Code / implementation expected: Yes. A working component with a self-correcting timer, cleanup, a pure formatting function and the format toggle.

React
Timers
State

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Beginners preparing for a frontend machine coding round. You know a little JavaScript and have seen a React component; timers and effects are explained from zero. Difficulty: Easy

How to read this doc: Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the words an interviewer listens for. Every output quoted under "Verified" was printed by actually running the solution below on React 19.3.1 in jsdom, plus one measurement in real Chromium 141.

1. Why This Even Matters — A Story First

Picture a wall clock with a cheap motor. Every second the motor gives the hands a nudge. If the battery is weak, a nudge comes a little late, and the clock never makes up for it: by the end of the week it is three minutes slow. That clock counts nudges.

Now picture a clock that, every second, glances at a radio time s

The solution is hidden so you can try first

14 min read · 9 sections

React solution

Every file of the working solution. Open it in the playground to run and change it.

ReactComplete solution

Open in playground

import DigitalClock from "./src/components/DigitalClock";

export default function App() {
  return (
    <main className="page">
      <DigitalClock />
    </main>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.