Multi Stopwatch

Multi Stopwatch

Click a stopwatch to activate it. Each stopwatch has its own keybinding (default: S). Focus an input to edit name or key.

:root { --bg: #0f1724; --card: #0b1220; --accent: #6ee7b7; --muted: #9aa4b2; --danger: #ff6b6b; --glass: rgba(255, 255, 255, 0.03); } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: linear-gradient(180deg, #071024 0%, #071f2b 100%); color: #e6eef6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } main { max-width: 1000px; margin: 40px auto; padding: 24px; } h1 { margin: 0 0 16px 0; font-size: 28px; color: var(--accent); } .controls-top { display: flex; gap: 12px; margin-bottom: 16px; } button { background: var(--glass); border: 1px solid rgba(255,255,255,0.04); color: var(--accent); padding: 8px 12px; border-radius: 8px; cursor: pointer; transition: transform 120ms ease, background 120ms ease; font-weight: 600; } button:hover { transform: translateY(-2px); } .stopwatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .stopwatch-box { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border: 1px solid rgba(255,255,255,0.04); padding: 12px; border-radius: 10px; position: relative; cursor: pointer; min-height: 110px; display: flex; flex-direction: column; justify-content: center; transition: box-shadow 160ms ease, transform 160ms ease; } .stopwatch-box:hover { transform: translateY(-4px); box-shadow: 0 6px 22px rgba(0,0,0,0.35); } .stopwatch-box.active { outline: 2px solid rgba(110,231,183,0.16); box-shadow: 0 10px 30px rgba(46,199,150,0.06); } .stopwatch-box-header { display: flex; align-items: center; margin-bottom: 8px; gap: 8px; } .stopwatch-name-input { flex: 1; background: transparent; border: 1px solid rgba(255,255,255,0.04); color: #e6eef6; padding: 6px 8px; border-radius: 6px; font-weight: 600; outline: none; } .key-input { width: 44px; text-align: center; background: transparent; border: 1px solid rgba(255,255,255,0.04); color: #e6eef6; padding: 6px 8px; border-radius: 6px; font-weight: 700; text-transform: uppercase; outline: none; } .timer-display { font-size: 22px; font-weight: 700; color: #e8fbf0; text-align: center; margin-bottom: 10px; letter-spacing: 0.4px; } .controls { display: flex; gap: 8px; justify-content: center; } .remove-btn { position: absolute; top: 8px; right: 8px; background: transparent; color: var(--danger); border: none; font-weight: 700; font-size: 18px; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 6px; } .hint { margin-top: 18px; color: var(--muted); font-size: 13px; } @media (max-width: 520px) { .timer-display { font-size: 20px; } } // Stopwatch module: creates an independent stopwatch box element with a per-box keybinding input. // Callers can pass onTick and onRemove callbacks to react to updates/removals. export function createStopwatchBox({ onTick, onRemove } = {}) { const box = document.createElement('div'); box.classList.add('stopwatch-box'); box.innerHTML = `

00:00:0

`; const display = box.querySelector('.timer-display'); const startStopBtn = box.querySelector('.start-btn'); const resetBtn = box.querySelector('.reset-btn'); const removeBtn = box.querySelector('.remove-btn'); const nameInput = box.querySelector('.stopwatch-name-input'); const keyInput = box.querySelector('.key-input'); let timerInterval = null; let startTime = 0; let elapsedTime = 0; // Expose elapsedTime and keybinding on the element for external logic (sorting, key handling) box.elapsedTime = elapsedTime; box.keybinding = (keyInput.value || 'S').toLowerCase(); function formatTime(ms) { const date = new Date(ms); const minutes = String(date.getUTCMinutes()).padStart(2, '0'); const seconds = String(date.getUTCSeconds()).padStart(2, '0'); const deci = String(Math.floor(date.getUTCMilliseconds() / 100)); // 0-9 return `${minutes}:${seconds}:${deci}`; } function updateDisplay() { display.textContent = formatTime(elapsedTime); } function tick() { elapsedTime = Date.now() - startTime; box.elapsedTime = elapsedTime; updateDisplay(); if (typeof onTick === 'function') onTick(box); } function _start() { if (!timerInterval) { startTime = Date.now() - elapsedTime; timerInterval = setInterval(tick, 100); } } function _stop() { if (timerInterval) { clearInterval(timerInterval); timerInterval = null; } } function _reset() { _stop(); elapsedTime = 0; box.elapsedTime = 0; updateDisplay(); if (typeof onTick === 'function') onTick(box); } // Public API attached to the element box.start = function() { startStopBtn.textContent = 'Stop'; _start(); }; box.stop = function() { startStopBtn.textContent = 'Start'; _stop(); }; box.reset = function() { _reset(); startStopBtn.textContent = 'Start'; }; box.toggle = function() { if (timerInterval) { box.stop(); } else { box.start(); } }; // Wire UI startStopBtn.addEventListener('click', (e) => { e.stopPropagation(); box.toggle(); }); resetBtn.addEventListener('click', (e) => { e.stopPropagation(); box.reset(); }); removeBtn.addEventListener('click', (e) => { e.stopPropagation(); box.stop(); if (typeof onRemove === 'function') onRemove(box); box.remove(); }); // Key input behavior: keep a single character, uppercase display, store lowercase binding keyInput.addEventListener('input', (e) => { const v = keyInput.value || ''; const ch = v.slice(0, 1); keyInput.value = ch.toUpperCase(); box.keybinding = (ch || 's').toLowerCase(); }); // Prevent the key input from accepting whitespace or multiple chars via paste keyInput.addEventListener('paste', (e) => { e.preventDefault(); const text = (e.clipboardData || window.clipboardData).getData('text') || ''; const ch = text.trim().slice(0, 1); keyInput.value = ch.toUpperCase(); box.keybinding = (ch || 's').toLowerCase(); }); // When focusing the name input, prevent parent click from changing active state unexpectedly nameInput.addEventListener('click', (e) => e.stopPropagation()); keyInput.addEventListener('click', (e) => e.stopPropagation()); // Initialize display updateDisplay(); return box; } import { createStopwatchBox } from './stopwatch.js'; document.addEventListener('DOMContentLoaded', () => { const container = document.getElementById('stopwatch-container'); const addBoxBtn = document.getElementById('addBoxBtn'); let activeStopwatch = null; const allStopwatches = []; // Global key handler: respects per-box keybinding and avoids triggering while typing in inputs document.addEventListener('keydown', (e) => { const activeElement = document.activeElement; const isTyping = activeElement && (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA'); if (isTyping) return; // don't trigger while user is typing in inputs if (!activeStopwatch) return; const assignedKey = activeStopwatch.keybinding || 's'; if (e.key.toLowerCase() === (assignedKey || 's').toLowerCase()) { // toggle the active stopwatch activeStopwatch.toggle(); } }); // Create and register a stopwatch with callbacks wired to maintain the collection & sorting function createAndRegisterStopwatch() { const box = createStopwatchBox({ onTick: () => sortStopwatches(), onRemove: (removedBox) => { const idx = allStopwatches.indexOf(removedBox); if (idx > -1) allStopwatches.splice(idx, 1); if (activeStopwatch === removedBox) activeStopwatch = null; sortStopwatches(); } }); allStopwatches.push(box); container.appendChild(box); setActiveStopwatch(box); return box; } addBoxBtn.addEventListener('click', () => { createAndRegisterStopwatch(); }); // Click inside container to set active stopwatch container.addEventListener('click', (e) => { const box = e.target.closest('.stopwatch-box'); if (box) { setActiveStopwatch(box); } }); function setActiveStopwatch(box) { if (activeStopwatch) { activeStopwatch.classList.remove('active'); } activeStopwatch = box; if (activeStopwatch) { activeStopwatch.classList.add('active'); const nameInput = activeStopwatch.querySelector('.stopwatch-name-input'); if (nameInput) nameInput.focus(); } } function sortStopwatches() { allStopwatches.sort((a, b) => (b.elapsedTime || 0) - (a.elapsedTime || 0)); allStopwatches.forEach(box => container.appendChild(box)); } // Create an initial stopwatch createAndRegisterStopwatch(); }); Multi Stopwatch App - Open index.html in your browser to run. - Click a stopwatch to activate it (it will focus the name input). - Each stopwatch has a single-character keybinding (default "S"); edit it using the key input. - Press the active stopwatch's key to Start/Stop it (keyboard input is ignored while typing in inputs). - Use the Reset and Remove buttons on each stopwatch. - Stopwatches are sorted descending by elapsed time automatically.