Build a Pomodoro Timer with JavaScript

The Pomodoro Technique is simple: work for 25 minutes, rest for 5, and after four rounds take a longer break. It works because a short, visible countdown makes starting easy and stopping guilt-free. Building your own timer is a great beginner project — it teaches intervals, state, and DOM updates in one small app.

The core logic is just a countdown. Here is the heart of it:

let secondsLeft = 25 * 60; // 25 minutes
let timerId = null;

function tick() {
  secondsLeft--;
  updateDisplay(secondsLeft);
  if (secondsLeft <= 0) {
    clearInterval(timerId);
    playSound();
    switchMode(); // work -> break, break -> work
  }
}

function startTimer() {
  if (!timerId) timerId = setInterval(tick, 1000);
}

setInterval runs your tick function every second. Your state is small: how many seconds are left, whether the timer is running, and whether you are in a work session or a break. The display update is a formatting job — turn seconds into MM:SS and write it into the page.

Build it in layers. First, a page with a big time display and Start, Pause and Reset buttons. Then add the work/break switching and a counter showing completed pomodoros. Then the nice touches: a progress ring that fills as time passes, a sound when a session ends, and saving today's completed count in localStorage so it survives a page refresh.

The common mistakes are worth knowing. Do not create a new interval every time Start is clicked — check whether one is already running, or you will get two timers racing. Do not trust setInterval to be exactly one second; for a timer it is fine, but if you want accuracy over long sessions, compare against Date.now(). And keep your state in one place — a single object — so the display never disagrees with the timer.

Ship it as one HTML file and use it tomorrow. The best part of this project is that you become its first user: set it to 25 minutes, do one real task, and notice how much easier starting feels when the timer is running. Small projects that you actually use teach more than big ones you abandon.