Lap Memory Stopwatch using React

Stopwatch is an application which helps to track time in hours, minutes, seconds, and milliseconds. This application implements all the basic operations of a stopwatch such as start, pause and reset button. It has an additional feature using which we can keep a record of laps which is useful when we have to note time for certain checkpoints.

Preview of Final Output:

Prerequisites and Technologies:

• ReactJS
• CSS
• JSX
• Functional Components in React

Approach:

This program creates a functional stopwatch timer with start, pause, reset, and lap features. It maintains state variables for hours, minutes, seconds, and milliseconds, ensuring real-time updates using the “useEffect” hook. Proper interval clearing prevents memory leaks, delivering a straightforward and reliable stopwatch for time tracking.

Functionalities:

• When users click “Start,” the timer begins, disabling the button with a “not-allowed” cursor.
• “Pause” stops the timer, and “Reset” sets all time units to zero.
• The program also offers a “Lap” feature for recording lap times, allowing users to track multiple intervals

Steps to create the application :

Step 1: Set up React project using the command

npx create-react-app <<name of project>>

Step 2: Navigate to the project folder using

cd <<Name_of_project>>

Step 3: Create a folder “components” and add three new files in it namely StopWatch.js, Lap.js and StopWatch.css.

Project Structure:

Project Structure

The updated dependencies in package.json will look like:

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  }

Example: Write the following code in respective files

• App.js: This file imports the StopWatch components and exports it.
• StopWatch.js: This file contains the logic to track time in hours, minutes, seconds, and milliseconds, offering user-friendly controls for starting, pausing, and resetting the timer.
• Lap.js : This file contains the logic for displaying the laps in a list. From StopWatch.js file we send a prop laps to this file.
• StopWatch.css: This file contains the design of the StopWatch.js elements.

Javascript

// App.js

import './App.css';
import StopWatch from './components/StopWatch';

function App() {
  return (
    <div className="App">
      <StopWatch />
    </div>
  );
}

export default App;

Javascript

// StopWatch.js
import React, { useState, useEffect } from "react";
import "./StopWatch.css";
import Lap from "./Lap";

export default function StopWatch() {
    const [seconds, setSeconds] = useState(0);
    const [minutes, setMinutes] = useState(0);
    const [hours, setHours] = useState(0);
    const [miliSeconds, setMiliSeconds] = useState(0);
    const [laps, setLaps] = useState([]);
    const [isRunning, setIsRunning] = useState(false);

    const formatWithLeadingZero = (number) => {
        if (number < 10) return "0" + number;
        else return number.toString();
    };

    useEffect(() => {
        let interval;

        if (isRunning) {
            interval = setInterval(() => {
                setMiliSeconds((miliSeconds) => {
                    if (miliSeconds >= 99) {
                        setSeconds((seconds) => {
                            if (seconds >= 59) {
                                setMinutes((minutes) => {
                                    if (minutes >= 59) {
                                        setHours((prevHours) => prevHours + 1);
                                        return 0;
                                    } else {
                                        return minutes + 1;
                                    }
                                });
                                return 0;
                            } else {
                                return seconds + 1;
                            }
                        });
                        return 0;
                    } else {
                        return miliSeconds + 1;
                    }
                });
            }, 10);
        }
        return () => clearInterval(interval);
    }, [isRunning]);

    const handleStart = () => {
        setIsRunning(true);
    };

    const handlePause = () => {
        setIsRunning(false);
    };

    const handleLap = () => {
        const lapTime =
            formatWithLeadingZero(hours) +
            ":" +
            formatWithLeadingZero(minutes) +
            ":" +
            formatWithLeadingZero(seconds) +
            "." +
            formatWithLeadingZero(miliSeconds);
        setLaps((prevLaps) => [...prevLaps, lapTime]);
    };

    const handleReset = () => {
        setIsRunning(false);
        setMiliSeconds(0);
        setSeconds(0);
        setMinutes(0);
        setHours(0);
        setLaps([]);
    };

    return (
        <div className="container">
            <div className="timeDisplay">
                {formatWithLeadingZero(hours)} : {formatWithLeadingZero(minutes)} :{" "}
                {formatWithLeadingZero(seconds)} : {formatWithLeadingZero(miliSeconds)}
            </div>
            <div className="buttons">
                <button
                    className="btn"
                    onClick={handleStart}
                    disabled={isRunning}
                    style={{ cursor: isRunning ? "not-allowed" : "pointer" }}
                >
                    Start
                </button>
                <button className="btn" onClick={handlePause}>
                    Pause
                </button>
                <button className="btn" onClick={handleLap}>
                    Lap
                </button>
                <button className="btn" onClick={handleReset}>
                    Reset
                </button>
            </div>
            <Lap laps={laps} />
        </div>
    );
}

Javascript

// Lap.js
import React from "react";

export default function Laps({ laps }) {
    const calculateTimeDifference = (timeString1, timeString2) => {
        const time1 = new Date(`1970-01-01T${timeString1}Z`);
        const time2 = new Date(`1970-01-01T${timeString2}Z`);
        const timeDiff = Math.abs(time2 - time1);
        const hours = Math.floor(timeDiff / 3600000).toString().padStart(2, '0');
        const minutes = Math.floor((timeDiff % 3600000) / 60000).toString().padStart(2, '0');
        const seconds = Math.floor((timeDiff % 60000) / 1000).toString().padStart(2, '0');
        const milliseconds = ((timeDiff % 1000) / 10).toString().padStart(2, '0');
        const resultString = `${hours}:${minutes}:${seconds}.${milliseconds}`;
        return resultString;
    }

    return (
        <div className="laps" style={{ display: (laps.length) ? 'block' : 'none' }}>
            <h3><span>Lap</span><span>Time</span><span>Total Time</span></h3>
            <ul>
                {laps.map((lap, index) => (
                    <li key={index}>
                        <span>{`Lap ${index + 1}`}</span>
                        <span>{calculateTimeDifference(lap, (index !== 0) ? laps[index - 1] : "00:00:00.00")}</span>
                        <span>{lap}</span>
                    </li>
                ))}
            </ul>
        </div>
    );
};

CSS

/* StopWatch.css */

body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

.container {
    padding: 30px;
    border: 1px solid #ced4da;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
    margin: 5px;
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
}

.timeDisplay {
    padding: 20px;
    font-size: 30px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
    border-radius: 0.25em;
    text-align: center;
}

.buttons {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

button.btn {
    padding: 10px 20px;
    outline: none;
    border: 1px solid #ced4da;
    margin: 5px;
    border-radius: 4px;
    cursor: pointer;
    background: #1d9bf0;
    color: #fff;
    font-size: 16px;
    transition: all 0.5s;
}

button.btn:hover {
    background-color: #1879ba;
}

.laps {
    margin-top: 20px;
}

.laps h3 {
    text-align: left;
    display: flex;
    justify-content: space-between;
    margin: 5px;
}

.laps ul {
    list-style-type: none;
    padding: 0;
}

.laps li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0px 5px 10px 5px;
}

@media screen and (max-width: 420px) {
    .buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

Steps to run the application:

Step 1: Type the following command in terminal.

npm start

Step 2: Open web-browser and type the following URL

http://localhost:3000/

Output:

Created StopWatch using ReactJSR