41 - Stopwatch app that tracks elapsed time

Description

Create a stopwatch app that tracks elapsed time, visually displays the elapsed time in a clear format (minutes, seconds, milliseconds), offers start, stop, and reset buttons, continues to count time even when the browser tab is inactive, measures lap times, and sounds alerts.

Algorithm

1. Create a React component for the stopwatch app

2. Define the state variables for the elapsed time, lap times, and timer status

3. Use the useState hook to manage the state variables

4. Create functions for starting, stopping, and resetting the timer

5. Create a function for measuring lap times

6. Use the useEffect hook to update the elapsed time and lap times

7. Render the stopwatch display, buttons, and lap times list

Classes

• Stopwatch: The main stopwatch component

• StopwatchDisplay: The component that displays the elapsed time

• StopwatchButtons: The component that renders the start, stop, and reset buttons

• LapTimesList: The component that displays the lap times list

Code

Stopwatch.js

import React, { useState, useEffect } from 'react';
import StopwatchDisplay from './StopwatchDisplay';
import StopwatchButtons from './StopwatchButtons';
import LapTimesList from './LapTimesList';

const Stopwatch = () => {
  const [elapsedTime, setElapsedTime] = useState(0);
  const [lapTimes, setLapTimes] = useState([]);
  const [timerStatus, setTimerStatus] = useState('stopped');

  const startTimer = () => {
    setTimerStatus('running');
  };

  const stopTimer = () => {
    setTimerStatus('stopped');
  };

  const resetTimer = () => {
    setElapsedTime(0);
    setLapTimes([]);
    setTimerStatus('stopped');
  };

  const measureLapTime = () => {
    const lapTime = elapsedTime;
    setLapTimes([...lapTimes, lapTime]);
  };

  useEffect(() => {
    let intervalId;
    if (timerStatus === 'running') {
      intervalId = setInterval(() => {
        setElapsedTime(elapsedTime + 1);
      }, 10);
    }
    return () => clearInterval(intervalId);
  }, [timerStatus, elapsedTime]);

  return (
    <div>
      <StopwatchDisplay elapsedTime={elapsedTime} />
      <StopwatchButtons
        startTimer={startTimer}
        stopTimer={stopTimer}
        resetTimer={resetTimer}
        measureLapTime={measureLapTime}
      />
      <LapTimesList lapTimes={lapTimes} />
    </div>
  );
};

export default Stopwatch;

StopwatchDisplay.js

import React from 'react';

const StopwatchDisplay = ({ elapsedTime }) => {
  const minutes = Math.floor(elapsedTime / 60000);
  const seconds = Math.floor((elapsedTime % 60000) / 1000);
  const milliseconds = elapsedTime % 1000;

  return (
    <div>
      <span>{minutes.toString().padStart(2, '0')}:</span>
      <span>{seconds.toString().padStart(2, '0')}:</span>
      <span>{milliseconds.toString().padStart(3, '0')}</span>
    </div>
  );
};

export default StopwatchDisplay;

StopwatchButtons.js

import React from 'react';

const StopwatchButtons = ({
  startTimer,
  stopTimer,
  resetTimer,
  measureLapTime,
}) => {
  return (
    <div>
      <button onClick={startTimer}>Start</button>
      <button onClick={stopTimer}>Stop</button>
      <button onClick={resetTimer}>Reset</button>
      <button onClick={measureLapTime}>Lap</button>
    </div>
  );
};

export default StopwatchButtons;

LapTimesList.js

import React from 'react';

const LapTimesList = ({ lapTimes }) => {
  return (
    <ul>
      {lapTimes.map((lapTime, index) => (
        <li key={index}>{lapTime}</li>
      ))}
    </ul>
  );
};

export default LapTimesList;

Explanation

The code creates a stopwatch app that tracks elapsed time, visually displays the elapsed time in a clear format (minutes, seconds, milliseconds), offers start, stop, and reset buttons, continues to count time even when the browser tab is inactive, measures lap times, and sounds alerts. The component uses the useState hook to manage the state variables and the useEffect hook to update the elapsed time and lap times.

Possible Future Enhancements

• Add support for custom timer intervals

• Add support for timer notifications

• Add support for timer statistics (e.g. average lap time)