Stopwatch & Timer / ストップウォッチ & タイマー

A combined stopwatch and countdown timer built with vanilla JavaScript — no build step, no dependencies.

Live demo: https://sen.ltd/portfolio/stopwatch-timer/

---

Features

Stopwatch

• Start / Stop / Reset / Lap
• Lap list with individual and cumulative times
• Best lap (green) and worst lap (red) highlighting
• Timestamp-based accuracy (no interval drift)

Countdown Timer

• Flexible input: 1:30:00, 90s, 5m, 1h30m, bare seconds
• Start / Pause / Reset
• Audio beep on completion (Web Audio API)
• Browser notification on completion (with permission)
• Repeat mode — auto-restarts when done

General

• Large monospace digital display with milliseconds
• Keyboard shortcuts: Space (start/stop), R (reset), L (lap)
• Japanese / English UI toggle
• Dark theme

---

Usage

# Serve locally (no build required)
npm run serve
# then open http://localhost:8080

Or just open index.html directly in a modern browser.

---

Project structure

stopwatch-timer/
├── index.html      # Single-page app
├── style.css       # Dark-theme styles
├── src/
│   ├── main.js     # DOM, events, render loop
│   ├── stopwatch.js# Pure stopwatch logic
│   ├── timer.js    # Pure countdown timer logic
│   └── i18n.js     # ja/en translations
├── tests/
│   ├── stopwatch.test.js
│   └── timer.test.js
└── package.json

---

Tests

npm test

Uses Node.js built-in test runner (node:test) — no extra packages needed.

---

Keyboard shortcuts

Key	Action
Space	Start / Stop
R	Reset
L	Lap (stopwatch only)

---

License

MIT © 2026 SEN LLC (SEN 合同会社)

Links

• 🌐 Demo: https://sen.ltd/portfolio/stopwatch-timer/
• 📝 dev.to: https://dev.to/sendotltd/a-stopwatch-and-timer-with-lap-tracking-and-timestamp-based-accuracy-58o0