🍅 Pomodoro Timer

⏱ Current phase

{{ phaseLabel }}
{{ formattedRemaining }}
Status: {{ running ? 'running' : (phase === 'idle' ? 'idle' : 'paused') }}
Next phase: {{ nextPhaseLabel }}

🔧 Controls

⚙️ Cycle configuration

Changes to durations take effect on the next phase. Changing long break every updates the cycle visualization on the right immediately.

📊 Sessions in current cycle

{{ sessionsCounterText }}
Total completed sessions: {{ sessionsCompleted }}
Completed cycles (long breaks taken): {{ cycleCount }}

🍅 Cycle progress

🍅 ○

One tomato per completed work session. After {{ longBreakEvery }} tomatoes the next break is a long break and a new cycle begins.

📖 Cycle rules

  • Work → Short break → Work → Short break → …
  • Every {{ longBreakEvery }}th completed work session → Long break.
  • After Long break → back to Work; cycle counter increments.
  • Pause freezes the current phase; Resume picks up exactly where it left off.
  • Skip phase ends the current phase immediately (useful for testing).
  • Reset returns to Idle with all counters at zero.
⚠️

ℹ️ About Pomodoro Timer

What this tool does

The Pomodoro Timer is a productivity timer that alternates focused work blocks with short breaks. By default each work block is 25 minutes, each short break is 5 minutes, and every 4th completed work block is followed by a longer 15-minute break instead. The cycle then repeats. Click Start to begin the first work block; the page renders a live HH:MM:SS countdown, the phase label (Work / Short break / Long break), the number of completed sessions in the current cycle, and which phase is next. When a phase ends a short audio cue plays and the next phase begins automatically.

The Pomodoro Technique

The Pomodoro Technique is a time-management method developed by Francesco Cirillo in the late 1980s while he was a university student in Italy. He named it after the tomato-shaped (pomodoro) kitchen timer he used to time his study sessions. The core idea is simple: pick a single task, work on it without interruption for one “pomodoro” (25 minutes), take a short break (5 minutes), and after four pomodoros take a longer break (15–30 minutes). The fixed-length intervals make procrastination expensive and make it easier to return to a task after a distraction.

Researchers and practitioners since have settled on the same shape because short, bounded sprints reduce decision fatigue, surface estimation errors quickly (“this took six pomodoros, not two”), and turn breaks into a built-in feature rather than a guilty interruption. The audio cue at the end of each phase removes the need to watch the clock, so you can focus on the work itself.

How it works (technical details)

  • Pure client-side. The phase, the remaining milliseconds, the session counter, and the cycle counter are all computed in your browser. No network request is made, and no data leaves the page. There is no API endpoint and no PHP service for this tool — the cycle math is too trivial to be worth exposing.
  • Computation. Each phase records a start time from performance.now(); the remaining time is phaseDurationMs − (performance.now() − phaseStartTime), recomputed every animation frame via window.requestAnimationFrame. When the remaining value crosses zero, the next phase's start time is stamped from performance.now() and the loop continues without drift.
  • Pause and resume. Pause freezes the displayed remainingMs. Resume shifts phaseStartTime forward by the amount of time the phase had already consumed, so the new countdown picks up exactly where the old one left off.
  • Skip. The Skip phase button ends the current phase immediately and advances to the next one, useful for testing the cycle or for finishing early.
  • Audio cues. A sine tone plays for half a second at the end of every phase using the Web Audio API: 880 Hz on work → short break, 1320 Hz on work → long break, and 660 Hz on break → work. The cue can be toggled off with the checkbox in the input column. Some browsers require a user interaction (such as clicking Start) before they will play sound — clicking Start counts.
  • Tab title updates. While a phase is running, the tool overwrites document.title with the remaining time and the phase label so a glance at the tab bar tells you what is happening even when this tab is in the background. Pausing or resetting restores the page's original title.

Use cases

  • Focused coding / writing sessions — pin the tab and let the cycle handle the break schedule.
  • Studying for an exam — the original use case; 25/5 sprints make long study sessions sustainable.
  • Pair programming or design reviews — share the visible countdown to keep the rotation honest.
  • Practice sessions — instrument practice, language drills, anything that benefits from short bounded reps.
  • Meeting-free deep-work blocks — defend the time visibly; the tab title doubles as a status indicator.

Privacy note

The cycle math, the formatted display, the tab-title updates, and the audio cue all run inside this page. No phase data, no remaining time, no session counts, and no audio data is sent to a server. There is no API endpoint for this tool — the algorithm is too trivial to be worth exposing, and the interesting behavior is entirely in your browser.

References

Ready