A lightweight, zero-dependency focus timer built with vanilla HTML, CSS, and ES modules.
- Three modes: Pomodoro (25 min), Short Break (5 min), Long Break (15 min)
- SVG ring progress indicator that depletes in real time
- Auto-advance: switches to a break after each focus session; triggers a long break every 4 sessions
- In-browser sound cues via the Web Audio API — no audio files needed
- Session counter persisted in
localStorageacross page reloads - Color theme shifts per mode (red → teal → violet)
https://pomodoroapp.romalbuilds.com
Open index.html directly in any modern browser — no build step required.
open pomodoro-app/index.html
Or serve it locally (needed for ES module imports in some browsers):
npx serve pomodoro-app
# or
python -m http.server 3000 --directory pomodoro-app
| File | Role |
|---|---|
index.html |
App shell and DOM structure |
style.css |
All styles, theming via CSS custom properties |
app.js |
Timer state machine, mode switching, session logic |
sounds.js |
Web Audio API sound generation |
storage.js |
localStorage read/write helpers |