Timer & Stopwatch

This tool combines two modes in a single tabbed interface: a countdown timer and a stopwatch. Both compute elapsed and remaining time from a stored Date.now() reference rather than decrementing a counter on every tick, which is the technique that keeps long runs accurate. The timer records a target timestamp (timerEndTime = Date.now() + totalMs) and each 100ms tick derives the display as timerEndTime - Date.now(); the stopwatch records a start timestamp and shows stopwatchElapsed + (Date.now() - startTime) on a faster 10ms interval. Because the displayed value is always recomputed from the wall clock, when a background browser tab throttles setInterval and a tick is skipped, the time snaps back to the correct value on the next tick instead of accumulating drift. The display format is HH:MM:SS.cc, where the trailing two digits are centiseconds (Math.floor((ms % 1000) / 10)), and the hours field is hidden until the elapsed time crosses one hour.

The timer ships nine quick presets (1, 3, 5, 10, 15, 30, and 45 minutes, plus 1 hour and 2 hours), or you can type a custom duration into separate hours, minutes, and seconds fields. The inputs are clamped on entry: hours accept 0-99 and minutes and seconds accept 0-59, so you cannot enter 90 minutes and must instead express it as 1 hour 30 minutes. When the countdown reaches zero the display panel turns red with a pulsing animation and a 'Timer Complete!' label. The completion alert has two independent channels: a Sound toggle (on by default) and a Notifications toggle (off until you grant browser permission, which is only requested when you click the button, never on page load). One caveat that follows from the throttling behavior above is that while the time math self-corrects on refocus, the chime and the desktop notification fire from inside the interval tick, so on a heavily throttled or frozen background tab the alert itself can arrive late.

The completion sound is synthesized live with the Web Audio API rather than played from an audio file. It builds an ascending C major chord from three sine oscillators at 523.25 Hz (C5), 659.25 Hz (E5), and 783.99 Hz (G5), staggered 0.15s apart, each shaped by a gain envelope that ramps up to 0.3 and decays toward 0.001 for a bell-like fade, and the whole chord is played twice 0.6s apart for emphasis. If the AudioContext is suspended, it calls resume() before scheduling the notes to satisfy the iOS Safari autoplay restriction. The stopwatch mode adds lap timing: each lap stores both its absolute split and its diff from the previous lap, and once more than one lap exists the fastest and slowest laps are highlighted green and red. Unlike the pomodoro-timer tool, this is freeform timing with no enforced work/break cycle and no completed-round tracking.