How to Build a Stopwatch in an Interview

How to Build a Stopwatch in an Interview

The stopwatch tests time handling and intervals. Here is how to build it with start, stop, reset, and laps.

Requirements

• Start, stop, reset buttons.
• Display elapsed time (HH:MM:SS.ms).
• Lap times (record split times).
• Accurate timing (use timestamps, not interval counting).

Plan (5 minutes)

1. HTML: display, buttons, lap list.
2. State: startTime, elapsed, running, laps.
3. Events: start, stop, reset, lap.
4. Logic: use Date.now() for accuracy.

Build Core (40 minutes)

HTML

<div class="stopwatch">
  <div class="display" id="display">00:00:00.000</div>
  <div class="controls">
    <button onclick="start()">Start</button>
    <button onclick="stop()">Stop</button>
    <button onclick="lap()">Lap</button>
    <button onclick="reset()">Reset</button>
  </div>
  <ul class="laps" id="laps"></ul>
</div>

JavaScript

let startTime = 0;
let elapsed = 0;
let running = false;
let interval = null;
let laps = [];

function format(ms) {
  const minutes = Math.floor(ms / 60000);
  const seconds = Math.floor((ms % 60000) / 1000);
  const millis = Math.floor(ms % 1000);
  return `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}.${String(millis).padStart(3, "0")}`;
}

function updateDisplay() {
  const current = running ? Date.now() - startTime + elapsed : elapsed;
  document.getElementById("display").textContent = format(current);
}

function start() {
  if (running) return;
  running = true;
  startTime = Date.now();
  interval = setInterval(updateDisplay, 10);
}

function stop() {
  if (!running) return;
  running = false;
  elapsed += Date.now() - startTime;
  clearInterval(interval);
}

function lap() {
  if (!running) return;
  const current = Date.now() - startTime + elapsed;
  laps.push(current);
  renderLaps();
}

function reset() {
  running = false;
  elapsed = 0;
  laps = [];
  clearInterval(interval);
  updateDisplay();
  renderLaps();
}

Edge Cases (20 minutes)

• Use Date.now() for accuracy (do not count intervals, which drift).
• Format time with leading zeros.
• Lap list with lap number and time.
• Pause and resume (preserve elapsed time).
• Display update frequency (every 10ms for smooth display).

The Takeaway

Build the stopwatch: HTML (display + buttons + lap list), JavaScript (use Date.now() for accuracy, start/stop/lap/reset, format with leading zeros), CSS (monospace font for display). Use timestamps, not interval counting, for accuracy. Preserve elapsed time on stop/resume.