Create a professional stopwatch application with lap timing capabilities. Perfect for tracking workouts, races, or any timed activities with multiple checkpoints.

Project Checklist

• Implement start, stop, and reset controls
• Display time in hours:minutes:seconds.milliseconds format
• Add lap/split functionality to record MEDIUM times
• Display a list of all recorded laps
• Show fastest and slowest lap times
• Ensure accurate timing using requestAnimationFrame or high-resolution timers

Bonus Project Checklist Items

• Add multiple stopwatch instances for comparing times
• Implement countdown timer mode
• Add sound alerts at specific time intervals
• Export lap times as CSV or JSON
• Create visual lap time graphs
• Add preset timers for common activities

Inspiration (Any companies/libraries similar)

• iPhone Stopwatch
• Sports timing apps
• Fitness trackers

Hint/Code snippet to start

To get started, you can use the following code snippet to implement timing:

let startTime = null;
let elapsedTime = 0;
let laps = [];
let animationFrameId = null;

function start() {
  startTime = performance.now() - elapsedTime;
  update();
}

function update() {
  elapsedTime = performance.now() - startTime;
  displayTime(elapsedTime);
  animationFrameId = requestAnimationFrame(update);
}

function recordLap() {
  laps.push({
    lapNumber: laps.length + 1,
    time: elapsedTime,
    lapTime: laps.length > 0 ? elapsedTime - laps[laps.length - 1].time : elapsedTime
  });
  displayLaps();
}