Timers & Clocks
All Projects Download Project (.ZIP)

3D Precision Stopwatch & Chronograph

An ultra-modern 3D interactive stopwatch and chronograph with real-time 3D gyroscope tilt, sweeping second hand, dual sub-dials, tactile mechanical pushers, theme switcher, and lap split telemetry.

Difficulty: Intermediate Est. Time: 30 mins Vanilla JS (ES6+) Includes HTML, CSS, JS & README (.ZIP)
Live UI Runner

3D Precision Stopwatch & Chronograph

live-sandbox://stopwatch

1. Project Overview & Features

The 3D Precision Stopwatch & Chronograph is an essential frontend project designed to help you bridge the gap between learning JavaScript syntax and building interactive, responsive web applications.

Key Features Implemented:

  • Realistic 3D watch chassis with dynamic cursor tilt and tactile pushers
  • Sweeping 3D analog seconds hand + minutes and millisecond sub-dials
  • High-frequency centisecond digital OLED display (HH:MM:SS.CS)
  • 4 switchable 3D themes: Cyberpunk Neon, F1 Racing Carbon, Luxury Gold, Stealth Matte
  • Built-in Web Audio API mechanical sound effects & keybindings (Space, L, R, T)
  • Comprehensive lap recorder with split deltas, fastest/slowest badges, copy, and CSV export

2. Step-by-Step Code Walkthrough

A Step 1: Semantic HTML Structure

We structure the interface using clean, semantic HTML elements. This ensures maximum accessibility and provides intuitive hooks for CSS classes and JavaScript query selectors.

HTML (index.html)
<div class="chrono-app-container theme-cyberpunk" id="chronoApp">
  <!-- Top Navigation & Theme Selector Bar -->
  <div class="chrono-nav-bar">
    <div class="theme-selector-group">
      <span class="theme-title"><i class="fas fa-palette me-1"></i> Skin:</span>
      <div class="theme-buttons">
        <button type="button" class="theme-btn active" data-theme="cyberpunk" title="Cyberpunk Neon"><i class="fas fa-bolt"></i> Cyber</button>
        <button type="button" class="theme-btn" data-theme="racing" title="F1 Racing Carbon"><i class="fas fa-flag-checkered"></i> Racing</button>
        <button type="button" class="theme-btn" data-theme="luxury" title="Luxury Rose Gold"><i class="fas fa-gem"></i> Gold</button>
        <button type="button" class="theme-btn" data-theme="stealth" title="Stealth Matte"><i class="fas fa-moon"></i> Stealth</button>
      </div>
    </div>
    <div class="hud-toggles">
      <button type="button" class="hud-toggle-btn active" id="btn-sound-toggle" title="Toggle Mechanical Audio Click"><i class="fas fa-volume-up"></i></button>
      <button type="button" class="hud-toggle-btn active" id="btn-tilt-toggle" title="Toggle 3D Gyroscope / Tilt"><i class="fas fa-cube"></i> 3D Tilt</button>
    </div>
  </div>

  <!-- 3D Viewport Stage -->
  <div class="chrono-3d-stage" id="chrono3dStage">
    <div class="watch-case-3d" id="watchCase3d">
      
      <!-- Mechanical Pushers on Bezel (Physical 3D Buttons) -->
      <div class="pusher pusher-left" id="pusherReset" title="Reset (Hotkey: R)">
        <div class="pusher-cap"><i class="fas fa-undo"></i></div>
        <div class="pusher-stem"></div>
        <span class="pusher-tag">RESET</span>
      </div>

      <div class="pusher pusher-crown" id="pusherCrown" title="Start / Pause (Hotkey: Space)">
        <div class="pusher-cap crown-cap"><i class="fas fa-power-off"></i></div>
        <div class="pusher-stem"></div>
        <span class="pusher-tag">START/PAUSE</span>
      </div>

      <div class="pusher pusher-right" id="pusherLap" title="Split Lap (Hotkey: L)">
        <div class="pusher-cap"><i class="fas fa-flag"></i></div>
        <div class="pusher-stem"></div>
        <span class="pusher-tag">LAP</span>
      </div>

      <!-- Outer 3D Bezel & Metallic Chassis -->
      <div class="watch-bezel-ring">
        <div class="bezel-metallic-rim">
          <div class="bezel-knurl"></div>
          
          <!-- Inner Dial Face -->
          <div class="watch-dial-surface">
            <div class="dial-texture-layer"></div>
            <div class="dial-light-reflection"></div>

            <!-- SVG 3D Dual Circular Progress Beams -->
            <svg class="dial-svg-ring" viewBox="0 0 300 300">
              <defs>
                <linearGradient id="ringGradSec" x1="0%" y1="0%" x2="100%" y2="100%">
                  <stop offset="0%" stop-color="var(--accent-glow)" />
                  <stop offset="100%" stop-color="var(--accent-bright)" />
                </linearGradient>
                <linearGradient id="ringGradMs" x1="0%" y1="0%" x2="100%" y2="100%">
                  <stop offset="0%" stop-color="var(--accent-alt)" />
                  <stop offset="100%" stop-color="var(--accent-bright)" />
                </linearGradient>
              </defs>
              <circle class="svg-track-bg" cx="150" cy="150" r="136" />
              <circle class="svg-progress-sec" id="svgProgressSec" cx="150" cy="150" r="136" stroke-dasharray="854.5" stroke-dashoffset="854.5" />
              <circle class="svg-track-sub" cx="150" cy="150" r="124" />
              <circle class="svg-progress-ms" id="svgProgressMs" cx="150" cy="150" r="124" stroke-dasharray="779.1" stroke-dashoffset="779.1" />
            </svg>

            <!-- Dial Index Hour/Minute Marks -->
            <div class="dial-ticks-container" id="dialTicksContainer"></div>

            <!-- Dual 3D Chrono Sub-Dials -->
            <div class="sub-dials-container">
              <!-- Sub Dial 1: Minutes (0-60) -->
              <div class="sub-dial sub-dial-left">
                <div class="sub-dial-face">
                  <div class="sub-dial-needle" id="subNeedleMin"></div>
                  <div class="sub-center-dot"></div>
                </div>
                <span class="sub-label">MIN (60)</span>
                <span class="sub-readout" id="subReadoutMin">00</span>
              </div>

              <!-- Sub Dial 2: High Speed 1/100s (0-100) -->
              <div class="sub-dial sub-dial-right">
                <div class="sub-dial-face">
                  <div class="sub-dial-needle sub-needle-speed" id="subNeedleMs"></div>
                  <div class="sub-center-dot"></div>
                </div>
                <span class="sub-label">1/100 SEC</span>
                <span class="sub-readout" id="subReadoutMs">00</span>
              </div>
            </div>

            <!-- Central OLED / Futuristic Digital HUD -->
            <div class="oled-hud-screen">
              <div class="oled-header">
                <span class="oled-indicator" id="oledStatusDot"></span>
                <span class="oled-mode-text" id="oledStatusText">CHRONO READY</span>
                <span class="oled-lap-pill" id="oledLapPill">LAP 0</span>
              </div>
              <div class="oled-digits-row">
                <span class="digit-segment" id="dispMinutes">00</span>
                <span class="digit-separator">:</span>
                <span class="digit-segment" id="dispSeconds">00</span>
                <span class="digit-dot">.</span>
                <span class="digit-segment digit-ms" id="dispMillis">00</span>
              </div>
              <div class="oled-split-row">
                <span class="split-caption">CURRENT LAP:</span>
                <span class="split-val" id="dispCurrentLap">00:00.00</span>
              </div>
            </div>

            <!-- Central 3D Sweeping Second Needle -->
            <div class="main-chronograph-pivot">
              <div class="chrono-sweeper-hand" id="mainChronoHand">
                <div class="sweeper-tip"></div>
                <div class="sweeper-body"></div>
                <div class="sweeper-tail"></div>
              </div>
              <div class="pivot-center-cap"></div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Primary Interactive Action Buttons Bar -->
  <div class="chrono-controls-bar">
    <button type="button" class="ctrl-btn btn-reset-style" id="btnActionReset" disabled>
      <i class="fas fa-undo"></i>
      <span class="btn-label">Reset</span>
      <kbd>R</kbd>
    </button>
    <button type="button" class="ctrl-btn btn-main-style btn-state-start" id="btnActionStart">
      <i class="fas fa-play" id="btnActionIcon"></i>
      <span class="btn-label" id="btnActionText">Start</span>
      <kbd>Space</kbd>
    </button>
    <button type="button" class="ctrl-btn btn-lap-style" id="btnActionLap" disabled>
      <i class="fas fa-flag"></i>
      <span class="btn-label">Lap Split</span>
      <kbd>L</kbd>
    </button>
  </div>

  <!-- Lap Telemetry & Split Analytics Panel -->
  <div class="laps-telemetry-card">
    <div class="telemetry-header">
      <div class="telemetry-title">
        <i class="fas fa-stopwatch me-2 text-warning"></i>
        <span>Lap Telemetry & Splits</span>
        <span class="telemetry-badge" id="telemetryCountBadge">0 Laps</span>
      </div>
      <div class="telemetry-actions" id="telemetryActions" style="display: none;">
        <button type="button" class="tool-btn-sm" id="btnExportCsv" title="Export Laps as CSV"><i class="fas fa-download me-1"></i> CSV</button>
        <button type="button" class="tool-btn-sm" id="btnCopySplits" title="Copy Laps to Clipboard"><i class="far fa-copy me-1"></i> Copy</button>
      </div>
    </div>

    <!-- Analytics Pills (Best, Avg, Slowest) -->
    <div class="telemetry-stats-row" id="telemetryStatsRow" style="display: none;">
      <div class="stat-badge stat-fastest">
        <i class="fas fa-bolt text-success me-1"></i>
        <span>Best Lap:</span>
        <strong id="statFastestVal">--:--.--</strong>
      </div>
      <div class="stat-badge stat-average">
        <i class="fas fa-chart-line text-info me-1"></i>
        <span>Average:</span>
        <strong id="statAverageVal">--:--.--</strong>
      </div>
      <div class="stat-badge stat-slowest">
        <i class="fas fa-tachometer-alt text-danger me-1"></i>
        <span>Slowest:</span>
        <strong id="statSlowestVal">--:--.--</strong>
      </div>
    </div>

    <!-- Scrollable Laps Data Table -->
    <div class="laps-table-wrapper">
      <div class="laps-col-headers">
        <span class="col-lap-num"># Lap</span>
        <span class="col-split-time">Split (Lap)</span>
        <span class="col-overall-time">Overall Time</span>
        <span class="col-rank">Status</span>
      </div>

      <div class="empty-telemetry-prompt" id="emptyTelemetryPrompt">
        <i class="fas fa-flag-checkered text-secondary mb-2" style="font-size: 1.8rem;"></i>
        <p class="mb-0 text-muted">No lap splits recorded yet. Click <strong>Start</strong> and then <strong>Lap Split</strong>.</p>
      </div>

      <ul class="laps-data-list" id="lapsDataList"></ul>
    </div>
  </div>
</div>

B Step 2: Styling & Responsive CSS

Modern CSS flexbox and grid layouts are used to make the UI look polished, centered, and responsive across desktop, tablet, and mobile screens.

CSS (style.css)
:root {
  --accent-bright: #06b6d4;
  --accent-glow: #3b82f6;
  --accent-alt: #f59e0b;
  --bezel-bg: linear-gradient(145deg, #1e293b, #0f172a);
  --bezel-border: #334155;
  --dial-bg: radial-gradient(circle, #0b1329 0%, #030712 100%);
  --needle-color: #06b6d4;
  --hud-bg: rgba(6, 182, 212, 0.08);
  --hud-border: rgba(6, 182, 212, 0.25);
  --hud-text: #f8fafc;
}

.theme-cyberpunk {
  --accent-bright: #06b6d4;
  --accent-glow: #3b82f6;
  --accent-alt: #f59e0b;
  --bezel-bg: linear-gradient(145deg, #1e293b, #0f172a);
  --bezel-border: #38bdf8;
  --dial-bg: radial-gradient(circle, #0c1a30 0%, #020617 100%);
  --needle-color: #06b6d4;
  --hud-bg: rgba(6, 182, 212, 0.08);
  --hud-border: rgba(6, 182, 212, 0.3);
  --hud-text: #f8fafc;
}

.theme-racing {
  --accent-bright: #ef4444;
  --accent-glow: #dc2626;
  --accent-alt: #facc15;
  --bezel-bg: linear-gradient(145deg, #27272a, #09090b);
  --bezel-border: #ef4444;
  --dial-bg: radial-gradient(circle, #1c1917 0%, #000000 100%);
  --needle-color: #ef4444;
  --hud-bg: rgba(239, 68, 68, 0.1);
  --hud-border: rgba(239, 68, 68, 0.35);
  --hud-text: #fef2f2;
}

.theme-luxury {
  --accent-bright: #fbbf24;
  --accent-glow: #d97706;
  --accent-alt: #10b981;
  --bezel-bg: linear-gradient(145deg, #44403c, #1c1917);
  --bezel-border: #d97706;
  --dial-bg: radial-gradient(circle, #062e24 0%, #021712 100%);
  --needle-color: #fbbf24;
  --hud-bg: rgba(251, 191, 36, 0.08);
  --hud-border: rgba(251, 191, 36, 0.35);
  --hud-text: #fffbeb;
}

.theme-stealth {
  --accent-bright: #38bdf8;
  --accent-glow: #0284c7;
  --accent-alt: #94a3b8;
  --bezel-bg: linear-gradient(145deg, #182234, #0b0f19);
  --bezel-border: #475569;
  --dial-bg: radial-gradient(circle, #111827 0%, #030712 100%);
  --needle-color: #38bdf8;
  --hud-bg: rgba(56, 189, 248, 0.06);
  --hud-border: rgba(148, 163, 184, 0.25);
  --hud-text: #f1f5f9;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

body {
  background: #090d16;
  color: #f8fafc;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-x: hidden;
}

.chrono-app-container {
  width: 100%;
  max-width: 480px;
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 28px;
  padding: 20px;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.8), 0 0 35px rgba(6, 182, 212, 0.1);
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: all 0.3s ease;
}

/* Nav & Skin Bar */
.chrono-nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  background: #1e293b;
  padding: 8px 12px;
  border-radius: 16px;
  border: 1px solid #334155;
}
.theme-selector-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.theme-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
}
.theme-buttons {
  display: flex;
  gap: 4px;
}
.theme-btn {
  background: #0f172a;
  border: 1px solid #334155;
  color: #cbd5e1;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.theme-btn:hover {
  background: #334155;
  color: #ffffff;
}
.theme-btn.active {
  background: var(--accent-bright);
  border-color: var(--accent-bright);
  color: #0f172a;
  box-shadow: 0 0 10px var(--accent-glow);
}
.hud-toggles {
  display: flex;
  gap: 6px;
}
.hud-toggle-btn {
  background: #0f172a;
  border: 1px solid #334155;
  color: #94a3b8;
  padding: 4px 9px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.hud-toggle-btn.active {
  background: rgba(14, 165, 233, 0.15);
  border-color: var(--accent-bright);
  color: var(--accent-bright);
}

/* 3D Stage & Chassis */
.chrono-3d-stage {
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 10px 15px;
}

.watch-case-3d {
  position: relative;
  width: 320px;
  height: 320px;
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out;
  cursor: grab;
}
.watch-case-3d:active {
  cursor: grabbing;
}

/* Mechanical Pushers (3D Buttons on Bezel) */
.pusher {
  position: absolute;
  z-index: 10;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.1s ease;
}
.pusher:active, .pusher.active-press {
  transform: scale(0.92);
}

.pusher-crown {
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
}
.pusher-left {
  top: 14px;
  left: 12px;
  transform: rotate(-35deg);
}
.pusher-right {
  top: 14px;
  right: 12px;
  transform: rotate(35deg);
}

.pusher-cap {
  width: 38px;
  height: 20px;
  background: linear-gradient(180deg, #64748b 0%, #334155 100%);
  border: 2px solid #94a3b8;
  border-radius: 8px 8px 3px 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: #f8fafc;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5), inset 0 2px 2px rgba(255, 255, 255, 0.4);
  transition: all 0.1s ease;
}
.crown-cap {
  width: 44px;
  height: 22px;
  background: linear-gradient(180deg, var(--accent-bright) 0%, var(--accent-glow) 100%);
  border-color: #ffffff;
  color: #0f172a;
}
.pusher:hover .pusher-cap {
  filter: brightness(1.2);
}
.pusher.active-press .pusher-cap {
  transform: translateY(4px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.pusher-stem {
  width: 12px;
  height: 8px;
  background: #1e293b;
  border-left: 1px solid #475569;
  border-right: 1px solid #475569;
}
.pusher-tag {
  display: none;
}

/* Watch Outer Bezel Ring */
.watch-bezel-ring {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--bezel-bg);
  padding: 10px;
  box-shadow: 
    0 15px 35px rgba(0,0,0,0.7),
    0 0 0 3px #0f172a,
    0 0 0 6px var(--bezel-border),
    inset 0 4px 10px rgba(255,255,255,0.15),
    inset 0 -6px 15px rgba(0,0,0,0.6);
  position: relative;
  transform: translateZ(20px);
}

.bezel-metallic-rim {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.4) 100%);
  border: 2px dashed rgba(255,255,255,0.1);
  padding: 6px;
  position: relative;
}

/* Watch Dial Surface */
.watch-dial-surface {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--dial-bg);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 25px rgba(0,0,0,0.9);
  border: 1px solid rgba(255,255,255,0.08);
}

.dial-texture-layer {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 8px 8px;
  opacity: 0.5;
  pointer-events: none;
}

.dial-light-reflection {
  position: absolute;
  top: -40%; left: -40%;
  width: 180%; height: 180%;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.03) 100%);
  pointer-events: none;
  transform: rotate(25deg);
}

/* SVG Circular Beams */
.dial-svg-ring {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
}
.svg-track-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.05);
  stroke-width: 4;
}
.svg-track-sub {
  fill: none;
  stroke: rgba(255, 255, 255, 0.03);
  stroke-width: 2;
}
.svg-progress-sec {
  fill: none;
  stroke: url(#ringGradSec);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.05s linear;
}
.svg-progress-ms {
  fill: none;
  stroke: url(#ringGradMs);
  stroke-width: 2.5;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.03s linear;
}

/* Dial Hour/Minute Ticks */
.dial-ticks-container {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
}
.dial-tick {
  position: absolute;
  left: 50%;
  top: 6px;
  width: 2px;
  height: 7px;
  background: rgba(255,255,255,0.3);
  transform-origin: 50% 134px;
}
.dial-tick.major {
  width: 3px;
  height: 12px;
  background: var(--accent-bright);
}
.dial-tick-num {
  position: absolute;
  left: 50%;
  top: 20px;
  transform: translateX(-50%);
  font-size: 0.65rem;
  font-weight: 700;
  color: #94a3b8;
  font-family: monospace;
}

/* Sub Dials */
.sub-dials-container {
  position: absolute;
  top: 55px;
  left: 0; right: 0;
  display: flex;
  justify-content: space-around;
  padding: 0 45px;
  z-index: 4;
}

.sub-dial {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.6);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.sub-dial-face {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 50%;
}
.sub-dial-needle {
  position: absolute;
  bottom: 50%;
  left: calc(50% - 1px);
  width: 2px;
  height: 22px;
  background: var(--accent-alt);
  transform-origin: bottom center;
  border-radius: 2px 2px 0 0;
  box-shadow: 0 0 6px var(--accent-alt);
  transform: rotate(0deg);
}
.sub-center-dot {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(0,0,0,0.8);
}
.sub-label {
  position: absolute;
  bottom: 5px;
  font-size: 0.52rem;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.sub-readout {
  position: absolute;
  top: 4px;
  font-size: 0.6rem;
  font-weight: 700;
  color: #cbd5e1;
  font-family: monospace;
}

/* Central OLED / HUD Screen */
.oled-hud-screen {
  position: absolute;
  bottom: 35px;
  left: 50%;
  transform: translateX(-50%);
  width: 210px;
  background: var(--hud-bg);
  border: 1px solid var(--hud-border);
  border-radius: 12px;
  padding: 8px 12px;
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.5), inset 0 0 10px rgba(6, 182, 212, 0.05);
  text-align: center;
  z-index: 5;
}
.oled-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}
.oled-indicator {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #64748b;
  display: inline-block;
  transition: all 0.2s;
}
.oled-indicator.active-running {
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: pulseLed 1s infinite alternate;
}
.oled-indicator.active-paused {
  background: #f59e0b;
  box-shadow: 0 0 8px #f59e0b;
}
@keyframes pulseLed {
  0% { opacity: 0.6; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1.2); }
}
.oled-mode-text {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--accent-bright);
  letter-spacing: 1px;
}
.oled-lap-pill {
  font-size: 0.6rem;
  font-weight: 700;
  background: rgba(255,255,255,0.1);
  padding: 1px 6px;
  border-radius: 6px;
  color: #f8fafc;
}
.oled-digits-row {
  font-family: 'Courier New', Courier, monospace, sans-serif;
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--hud-text);
  letter-spacing: 1.5px;
  line-height: 1.2;
  text-shadow: 0 0 10px var(--accent-glow);
}
.digit-separator, .digit-dot {
  color: var(--accent-bright);
  opacity: 0.8;
}
.digit-ms {
  color: var(--accent-alt);
  font-size: 1.35rem;
}
.oled-split-row {
  font-size: 0.65rem;
  color: #94a3b8;
  display: flex;
  justify-content: space-between;
  border-top: 1px dashed rgba(255,255,255,0.1);
  margin-top: 4px;
  padding-top: 3px;
  font-family: monospace;
}
.split-val {
  color: var(--accent-bright);
  font-weight: 700;
}

/* Central Sweeping Hand */
.main-chronograph-pivot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  z-index: 10;
  pointer-events: none;
}
.chrono-sweeper-hand {
  position: absolute;
  bottom: 50%;
  left: calc(50% - 1.5px);
  width: 3px;
  height: 120px;
  transform-origin: 50% 105px;
  transform: rotate(0deg);
  transition: transform 0.016s linear;
}
.sweeper-tip {
  position: absolute;
  top: 0;
  left: -2.5px;
  width: 8px;
  height: 16px;
  background: var(--needle-color);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  box-shadow: 0 0 8px var(--needle-color);
}
.sweeper-body {
  position: absolute;
  top: 15px;
  left: 0;
  width: 3px;
  height: 90px;
  background: var(--needle-color);
  box-shadow: 0 0 6px var(--needle-color);
}
.sweeper-tail {
  position: absolute;
  top: 105px;
  left: -4px;
  width: 11px;
  height: 20px;
  background: #64748b;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.3);
}
.pivot-center-cap {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  background: radial-gradient(circle, #f8fafc 0%, #475569 100%);
  border: 2px solid #0f172a;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.8);
}

/* Primary Action Bar */
.chrono-controls-bar {
  display: flex;
  gap: 12px;
}
.ctrl-btn {
  flex: 1;
  padding: 14px 10px;
  border: none;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 6px 15px rgba(0,0,0,0.3);
}
.ctrl-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}
.ctrl-btn kbd {
  font-size: 0.65rem;
  background: rgba(0,0,0,0.25);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
  opacity: 0.8;
}
.btn-reset-style {
  background: #334155;
  color: #f1f5f9;
}
.btn-reset-style:hover:not(:disabled) {
  background: #475569;
  transform: translateY(-2px);
}
.btn-main-style {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  flex: 1.4;
  font-size: 1.05rem;
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
}
.btn-main-style.btn-state-pause {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  box-shadow: 0 8px 20px rgba(239, 68, 68, 0.4);
}
.btn-main-style.btn-state-resume {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  box-shadow: 0 8px 20px rgba(2, 132, 199, 0.4);
}
.btn-main-style:hover:not(:disabled) {
  filter: brightness(1.1);
  transform: translateY(-2px);
}
.btn-lap-style {
  background: #0284c7;
  color: #ffffff;
}
.btn-lap-style:hover:not(:disabled) {
  background: #0369a1;
  transform: translateY(-2px);
}

/* Laps Telemetry Card */
.laps-telemetry-card {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 18px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.telemetry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.telemetry-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #f8fafc;
  display: flex;
  align-items: center;
}
.telemetry-badge {
  background: #0f172a;
  border: 1px solid #475569;
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 8px;
  color: #cbd5e1;
}
.telemetry-actions {
  display: flex;
  gap: 6px;
}
.tool-btn-sm {
  background: #0f172a;
  border: 1px solid #334155;
  color: #cbd5e1;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.tool-btn-sm:hover {
  background: #334155;
  color: #38bdf8;
}

/* Stats Row */
.telemetry-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.stat-badge {
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 8px 6px;
  text-align: center;
  font-size: 0.72rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stat-badge span {
  color: #94a3b8;
  font-size: 0.68rem;
}
.stat-badge strong {
  font-family: monospace;
  font-size: 0.82rem;
}
.stat-fastest strong { color: #10b981; }
.stat-average strong { color: #38bdf8; }
.stat-slowest strong { color: #ef4444; }

/* Table Wrapper */
.laps-table-wrapper {
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 12px;
  overflow: hidden;
}
.laps-col-headers {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1.6fr 1fr;
  padding: 8px 12px;
  background: #182234;
  font-size: 0.72rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  border-bottom: 1px solid #334155;
}
.laps-data-list {
  list-style: none;
  max-height: 190px;
  overflow-y: auto;
}
.empty-telemetry-prompt {
  padding: 24px 16px;
  text-align: center;
  font-size: 0.85rem;
}
.lap-row {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1.6fr 1fr;
  padding: 9px 12px;
  font-family: monospace;
  font-size: 0.85rem;
  border-bottom: 1px solid #1e293b;
  align-items: center;
  color: #cbd5e1;
  animation: fadeInLap 0.25s ease-out;
}
@keyframes fadeInLap {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}
.lap-row:nth-child(even) {
  background: rgba(255,255,255,0.02);
}
.lap-row.fastest-lap {
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
  font-weight: 700;
}
.lap-row.slowest-lap {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  font-weight: 700;
}
.rank-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  text-align: center;
  display: inline-block;
}
.badge-fastest { background: #10b981; color: #022c22; }
.badge-slowest { background: #ef4444; color: #450a0a; }
.badge-normal { background: #334155; color: #cbd5e1; }

C Step 3: JavaScript Logic & Event Handling

Here is the complete JavaScript code handling the state, event listeners, mathematical logic, and dynamic DOM rendering:

JavaScript (script.js)
/**
 * 3D Precision Stopwatch & Chronograph Engine
 */
let isRunning = false;
let startTime = 0;
let elapsedTime = 0;
let rafId = null;
let laps = [];
let audioEnabled = true;
let tiltEnabled = true;

// DOM Elements
const chronoApp = document.getElementById('chronoApp');
const stage3d = document.getElementById('chrono3dStage');
const watchCase = document.getElementById('watchCase3d');

// Readout Displays
const dispMin = document.getElementById('dispMinutes');
const dispSec = document.getElementById('dispSeconds');
const dispMs = document.getElementById('dispMillis');
const dispCurrentLap = document.getElementById('dispCurrentLap');
const subNeedleMin = document.getElementById('subNeedleMin');
const subNeedleMs = document.getElementById('subNeedleMs');
const subReadoutMin = document.getElementById('subReadoutMin');
const subReadoutMs = document.getElementById('subReadoutMs');
const mainChronoHand = document.getElementById('mainChronoHand');
const svgProgressSec = document.getElementById('svgProgressSec');
const svgProgressMs = document.getElementById('svgProgressMs');
const oledStatusDot = document.getElementById('oledStatusDot');
const oledStatusText = document.getElementById('oledStatusText');
const oledLapPill = document.getElementById('oledLapPill');

// Controls & Pushers
const btnActionStart = document.getElementById('btnActionStart');
const btnActionLap = document.getElementById('btnActionLap');
const btnActionReset = document.getElementById('btnActionReset');
const btnActionIcon = document.getElementById('btnActionIcon');
const btnActionText = document.getElementById('btnActionText');

const pusherCrown = document.getElementById('pusherCrown');
const pusherLap = document.getElementById('pusherLap');
const pusherReset = document.getElementById('pusherReset');

// Telemetry & Laps
const telemetryCountBadge = document.getElementById('telemetryCountBadge');
const telemetryActions = document.getElementById('telemetryActions');
const telemetryStatsRow = document.getElementById('telemetryStatsRow');
const statFastestVal = document.getElementById('statFastestVal');
const statAverageVal = document.getElementById('statAverageVal');
const statSlowestVal = document.getElementById('statSlowestVal');
const lapsDataList = document.getElementById('lapsDataList');
const emptyTelemetryPrompt = document.getElementById('emptyTelemetryPrompt');

const btnSoundToggle = document.getElementById('btn-sound-toggle');
const btnTiltToggle = document.getElementById('btn-tilt-toggle');
const btnExportCsv = document.getElementById('btnExportCsv');
const btnCopySplits = document.getElementById('btnCopySplits');

// Web Audio API Synthesizer for Mechanical Click Effects
let audioCtx = null;
function getAudioContext() {
  if (!audioCtx) {
    const AudioContextClass = window.AudioContext || window.webkitAudioContext;
    if (AudioContextClass) {
      audioCtx = new AudioContextClass();
    }
  }
  if (audioCtx && audioCtx.state === 'suspended') {
    audioCtx.resume();
  }
  return audioCtx;
}

function playMechanicalSound(type) {
  if (!audioEnabled) return;
  try {
    const ctx = getAudioContext();
    if (!ctx) return;

    const osc = ctx.createOscillator();
    const gain = ctx.createGain();
    osc.connect(gain);
    gain.connect(ctx.destination);

    const now = ctx.currentTime;

    if (type === 'start') {
      osc.type = 'triangle';
      osc.frequency.setValueAtTime(880, now);
      osc.frequency.exponentialRampToValueAtTime(220, now + 0.08);
      gain.gain.setValueAtTime(0.3, now);
      gain.gain.exponentialRampToValueAtTime(0.001, now + 0.08);
      osc.start(now);
      osc.stop(now + 0.08);
    } else if (type === 'pause') {
      osc.type = 'sine';
      osc.frequency.setValueAtTime(440, now);
      osc.frequency.exponentialRampToValueAtTime(180, now + 0.09);
      gain.gain.setValueAtTime(0.3, now);
      gain.gain.exponentialRampToValueAtTime(0.001, now + 0.09);
      osc.start(now);
      osc.stop(now + 0.09);
    } else if (type === 'lap') {
      osc.type = 'sine';
      osc.frequency.setValueAtTime(1200, now);
      osc.frequency.exponentialRampToValueAtTime(600, now + 0.06);
      gain.gain.setValueAtTime(0.25, now);
      gain.gain.exponentialRampToValueAtTime(0.001, now + 0.06);
      osc.start(now);
      osc.stop(now + 0.06);
    } else if (type === 'reset') {
      osc.type = 'square';
      osc.frequency.setValueAtTime(200, now);
      osc.frequency.exponentialRampToValueAtTime(80, now + 0.12);
      gain.gain.setValueAtTime(0.2, now);
      gain.gain.exponentialRampToValueAtTime(0.001, now + 0.12);
      osc.start(now);
      osc.stop(now + 0.12);
    }
  } catch (e) {
    // Audio safe fallback
  }
}

// Generate Dial Ticks Procedurally
function buildDialTicks() {
  const container = document.getElementById('dialTicksContainer');
  if (!container) return;
  container.innerHTML = '';

  for (let i = 0; i < 60; i++) {
    const tick = document.createElement('div');
    const isMajor = i % 5 === 0;
    tick.className = `dial-tick ${isMajor ? 'major' : ''}`;
    tick.style.transform = `rotate(${i * 6}deg)`;
    container.appendChild(tick);
  }
}
buildDialTicks();

// Time Formatting Helper
function formatTimeComponents(ms) {
  const minutes = Math.floor(ms / 60000);
  const seconds = Math.floor((ms % 60000) / 1000);
  const centis = Math.floor((ms % 1000) / 10);

  return {
    m: String(minutes).padStart(2, '0'),
    s: String(seconds).padStart(2, '0'),
    cs: String(centis).padStart(2, '0'),
    totalMs: ms,
    formatted: `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}.${String(centis).padStart(2, '0')}`
  };
}

// Precision Timing Loop via requestAnimationFrame
const SEC_CIRCUMFERENCE = 854.5;
const MS_CIRCUMFERENCE = 779.1;

function updateChronograph() {
  if (!isRunning) return;

  const currentNow = performance.now();
  const currentTotalMs = elapsedTime + (currentNow - startTime);
  const t = formatTimeComponents(currentTotalMs);

  // Update Digital Displays
  dispMin.textContent = t.m;
  dispSec.textContent = t.s;
  dispMs.textContent = t.cs;

  // Update Sub-dial Readouts & Needles
  subReadoutMin.textContent = t.m;
  subReadoutMs.textContent = t.cs;

  const minDeg = ((currentTotalMs / 60000) % 60) * 6;
  const msDeg = ((currentTotalMs % 1000) / 10) * 3.6;
  const secDeg = ((currentTotalMs / 1000) % 60) * 6;

  subNeedleMin.style.transform = `rotate(${minDeg}deg)`;
  subNeedleMs.style.transform = `rotate(${msDeg}deg)`;
  mainChronoHand.style.transform = `rotate(${secDeg}deg)`;

  // Update SVG Progress Rings
  const secFraction = (currentTotalMs % 60000) / 60000;
  const msFraction = (currentTotalMs % 1000) / 1000;
  svgProgressSec.style.strokeDashoffset = SEC_CIRCUMFERENCE - (SEC_CIRCUMFERENCE * secFraction);
  svgProgressMs.style.strokeDashoffset = MS_CIRCUMFERENCE - (MS_CIRCUMFERENCE * msFraction);

  // Current Lap Split Preview
  const prevLapTotal = laps.length > 0 ? laps[laps.length - 1].overallMs : 0;
  const currentLapSplitMs = currentTotalMs - prevLapTotal;
  dispCurrentLap.textContent = formatTimeComponents(currentLapSplitMs).formatted;

  rafId = requestAnimationFrame(updateChronograph);
}

// Button & Pusher Triggers
function handleToggleStart() {
  if (!isRunning) {
    // START / RESUME
    isRunning = true;
    startTime = performance.now();
    playMechanicalSound('start');

    btnActionIcon.className = 'fas fa-pause';
    btnActionText.textContent = 'Pause';
    btnActionStart.className = 'ctrl-btn btn-main-style btn-state-pause';

    btnActionLap.disabled = false;
    btnActionReset.disabled = false;

    oledStatusDot.className = 'oled-indicator active-running';
    oledStatusText.textContent = 'RUNNING';

    pusherCrown.classList.add('active-press');
    setTimeout(() => pusherCrown.classList.remove('active-press'), 150);

    rafId = requestAnimationFrame(updateChronograph);
  } else {
    // PAUSE
    isRunning = false;
    cancelAnimationFrame(rafId);
    elapsedTime += (performance.now() - startTime);
    playMechanicalSound('pause');

    btnActionIcon.className = 'fas fa-play';
    btnActionText.textContent = 'Resume';
    btnActionStart.className = 'ctrl-btn btn-main-style btn-state-resume';

    oledStatusDot.className = 'oled-indicator active-paused';
    oledStatusText.textContent = 'PAUSED';

    pusherCrown.classList.add('active-press');
    setTimeout(() => pusherCrown.classList.remove('active-press'), 150);
  }
}

function handleLapSplit() {
  if (!isRunning) return;

  const currentTotal = elapsedTime + (performance.now() - startTime);
  const prevOverall = laps.length > 0 ? laps[laps.length - 1].overallMs : 0;
  const splitMs = currentTotal - prevOverall;

  laps.push({
    lapNum: laps.length + 1,
    splitMs: splitMs,
    overallMs: currentTotal
  });

  playMechanicalSound('lap');
  oledLapPill.textContent = `LAP ${laps.length}`;

  pusherLap.classList.add('active-press');
  setTimeout(() => pusherLap.classList.remove('active-press'), 150);

  renderLapsTelemetry();
}

function handleReset() {
  isRunning = false;
  cancelAnimationFrame(rafId);
  startTime = 0;
  elapsedTime = 0;
  laps = [];

  playMechanicalSound('reset');

  // Reset Digits
  dispMin.textContent = '00';
  dispSec.textContent = '00';
  dispMs.textContent = '00';
  dispCurrentLap.textContent = '00:00.00';
  subReadoutMin.textContent = '00';
  subReadoutMs.textContent = '00';

  subNeedleMin.style.transform = 'rotate(0deg)';
  subNeedleMs.style.transform = 'rotate(0deg)';
  mainChronoHand.style.transform = 'rotate(0deg)';

  svgProgressSec.style.strokeDashoffset = SEC_CIRCUMFERENCE;
  svgProgressMs.style.strokeDashoffset = MS_CIRCUMFERENCE;

  btnActionIcon.className = 'fas fa-play';
  btnActionText.textContent = 'Start';
  btnActionStart.className = 'ctrl-btn btn-main-style btn-state-start';

  btnActionLap.disabled = true;
  btnActionReset.disabled = true;

  oledStatusDot.className = 'oled-indicator';
  oledStatusText.textContent = 'CHRONO READY';
  oledLapPill.textContent = 'LAP 0';

  pusherReset.classList.add('active-press');
  setTimeout(() => pusherReset.classList.remove('active-press'), 150);

  renderLapsTelemetry();
}

// Render Laps Telemetry Table & Analytics
function renderLapsTelemetry() {
  const count = laps.length;
  telemetryCountBadge.textContent = `${count} Lap${count === 1 ? '' : 's'}`;

  if (count === 0) {
    emptyTelemetryPrompt.style.display = 'block';
    telemetryActions.style.display = 'none';
    telemetryStatsRow.style.display = 'none';
    lapsDataList.innerHTML = '';
    return;
  }

  emptyTelemetryPrompt.style.display = 'none';
  telemetryActions.style.display = 'flex';
  telemetryStatsRow.style.display = 'grid';

  let minMs = laps[0].splitMs;
  let maxMs = laps[0].splitMs;
  let totalSum = 0;

  laps.forEach(l => {
    if (l.splitMs < minMs) minMs = l.splitMs;
    if (l.splitMs > maxMs) maxMs = l.splitMs;
    totalSum += l.splitMs;
  });

  const avgMs = Math.round(totalSum / count);

  statFastestVal.textContent = formatTimeComponents(minMs).formatted;
  statAverageVal.textContent = formatTimeComponents(avgMs).formatted;
  statSlowestVal.textContent = formatTimeComponents(maxMs).formatted;

  lapsDataList.innerHTML = '';

  // Render in reverse order (newest on top)
  [...laps].reverse().forEach(lap => {
    const li = document.createElement('li');
    const isFastest = count >= 2 && lap.splitMs === minMs;
    const isSlowest = count >= 2 && lap.splitMs === maxMs;

    let rowClass = 'lap-row';
    let badgeHtml = '<span class="rank-badge badge-normal">Split</span>';

    if (isFastest) {
      rowClass += ' fastest-lap';
      badgeHtml = '<span class="rank-badge badge-fastest"><i class="fas fa-bolt"></i> Best</span>';
    } else if (isSlowest) {
      rowClass += ' slowest-lap';
      badgeHtml = '<span class="rank-badge badge-slowest"><i class="fas fa-tachometer-alt"></i> Slow</span>';
    }

    li.className = rowClass;
    li.innerHTML = `
      <span class="col-lap-num">#${lap.lapNum}</span>
      <span class="col-split-time">${formatTimeComponents(lap.splitMs).formatted}</span>
      <span class="col-overall-time">${formatTimeComponents(lap.overallMs).formatted}</span>
      <span class="col-rank">${badgeHtml}</span>
    `;

    lapsDataList.appendChild(li);
  });
}

// 3D Interactive Gyroscope / Mouse Tracking
if (stage3d && watchCase) {
  stage3d.addEventListener('mousemove', (e) => {
    if (!tiltEnabled) return;
    const rect = stage3d.getBoundingClientRect();
    const x = e.clientX - rect.left - rect.width / 2;
    const y = e.clientY - rect.top - rect.height / 2;

    const rotX = -(y / (rect.height / 2)) * 18;
    const rotY = (x / (rect.width / 2)) * 18;

    watchCase.style.transform = `rotateX(${rotX.toFixed(2)}deg) rotateY(${rotY.toFixed(2)}deg) translateZ(15px)`;
  });

  stage3d.addEventListener('mouseleave', () => {
    watchCase.style.transform = 'rotateX(0deg) rotateY(0deg) translateZ(0px)';
  });
}

// Attach Event Listeners
btnActionStart.addEventListener('click', handleToggleStart);
btnActionLap.addEventListener('click', handleLapSplit);
btnActionReset.addEventListener('click', handleReset);

pusherCrown.addEventListener('click', handleToggleStart);
pusherLap.addEventListener('click', handleLapSplit);
pusherReset.addEventListener('click', handleReset);

// Theme Switcher
const themeBtns = document.querySelectorAll('.theme-btn');
themeBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    themeBtns.forEach(b => b.classList.remove('active'));
    btn.classList.add('active');

    const selectedTheme = btn.dataset.theme;
    chronoApp.className = `chrono-app-container theme-${selectedTheme}`;
    playMechanicalSound('lap');
  });
});

// Sound Toggle
btnSoundToggle.addEventListener('click', () => {
  audioEnabled = !audioEnabled;
  btnSoundToggle.classList.toggle('active', audioEnabled);
  btnSoundToggle.innerHTML = audioEnabled ? '<i class="fas fa-volume-up"></i>' : '<i class="fas fa-volume-mute"></i>';
  if (audioEnabled) playMechanicalSound('start');
});

// 3D Tilt Toggle
btnTiltToggle.addEventListener('click', () => {
  tiltEnabled = !tiltEnabled;
  btnTiltToggle.classList.toggle('active', tiltEnabled);
  if (!tiltEnabled && watchCase) {
    watchCase.style.transform = 'rotateX(0deg) rotateY(0deg) translateZ(0px)';
  }
});

// Copy Laps
btnCopySplits.addEventListener('click', () => {
  if (laps.length === 0) return;
  let text = "Lap # | Split Time | Overall Time\n";
  text += "----------------------------------\n";
  laps.forEach(l => {
    text += `Lap ${l.lapNum}: ${formatTimeComponents(l.splitMs).formatted} (Total: ${formatTimeComponents(l.overallMs).formatted})\n`;
  });

  navigator.clipboard.writeText(text).then(() => {
    const origHtml = btnCopySplits.innerHTML;
    btnCopySplits.innerHTML = '<i class="fas fa-check text-success me-1"></i> Copied!';
    setTimeout(() => { btnCopySplits.innerHTML = origHtml; }, 2000);
  });
});

// Export CSV
btnExportCsv.addEventListener('click', () => {
  if (laps.length === 0) return;
  let csv = "Lap Number,Split Time (Formatted),Split Time (ms),Overall Time (Formatted),Overall Time (ms)\n";
  laps.forEach(l => {
    csv += `${l.lapNum},"${formatTimeComponents(l.splitMs).formatted}",${l.splitMs},"${formatTimeComponents(l.overallMs).formatted}",${l.overallMs}\n`;
  });

  const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = `stopwatch-laps-${Date.now()}.csv`;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
});

// Keyboard Hotkeys
window.addEventListener('keydown', (e) => {
  // Prevent hotkeys if typing in an input
  if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;

  if (e.code === 'Space') {
    e.preventDefault();
    handleToggleStart();
  } else if (e.code === 'KeyL') {
    e.preventDefault();
    handleLapSplit();
  } else if (e.code === 'KeyR') {
    e.preventDefault();
    handleReset();
  } else if (e.code === 'KeyT') {
    e.preventDefault();
    // Cycle theme
    const themes = ['cyberpunk', 'racing', 'luxury', 'stealth'];
    const currentTheme = (chronoApp.className.match(/theme-(\w+)/) || [])[1] || 'cyberpunk';
    const nextIdx = (themes.indexOf(currentTheme) + 1) % themes.length;
    const nextTheme = themes[nextIdx];

    themeBtns.forEach(b => {
      b.classList.toggle('active', b.dataset.theme === nextTheme);
    });
    chronoApp.className = `chrono-app-container theme-${nextTheme}`;
    playMechanicalSound('lap');
  }
});

3. Core JavaScript Concepts You Learned

3D CSS Perspective & Tilt

Crucial concept utilized to power the dynamic state, user interactions, and styling of this project.

requestAnimationFrame Timing

Crucial concept utilized to power the dynamic state, user interactions, and styling of this project.

Web Audio API Haptics

Crucial concept utilized to power the dynamic state, user interactions, and styling of this project.

Dual Analog & Digital Engine

Crucial concept utilized to power the dynamic state, user interactions, and styling of this project.

Lap Telemetry & Analytics

Crucial concept utilized to power the dynamic state, user interactions, and styling of this project.

4. How to Run Locally on Your Computer

  1. Download the project ZIP: Click the Download Project (.ZIP) button at the top or in the live runner to save stopwatch-project.zip.
  2. Extract the archive: Unzip the downloaded file. Inside you will find separate index.html, style.css, script.js, index-standalone.html, and a comprehensive README.md.
  3. Open in any browser: Simply double-click index.html (or index-standalone.html) to open and test immediately in Chrome, Firefox, Safari, or Edge.
  4. Edit in Visual Studio Code: Open the extracted folder in VS Code. Right-click index.html and select "Open with Live Server" to enjoy instant live reloading as you modify HTML, CSS, or JS!

Bonus Challenges for Learners

Ready to level up? Try adding these extra features on your own:

  • Add sound effects or audio feedback for user button clicks.
  • Add custom theme color customizer with CSS variables.
  • Export the results to PDF or copy as a formatted text summary.

Other Beginner Projects You Might Like

Beginner20 mins
Timers & Clocks

Digital & Analog Dual Clock

A dynamic dual-mode clock with synchronized analog ticking hands, 12h/24h digital time, date formatting, and light/dark theme switch.

setInterval & requestAnimationFrameDate Object MethodsCSS transform: rotate()+2
Tutorial & Code