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.

Final Preview

👁 gfg

Prerequisites

• 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

npm create vite@latest <<name-of-project>> --template react

Step 2: Navigate to the project folder using

cd <<name-of-project>>

Step 3: Install the required dependencies:

npm install

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

Project Structure:

The updated dependencies in package.json will look like:

"dependencies": {
 "react": "^18.2.0",
 "react-dom": "^18.2.0",
 "react-scripts": "5.0.1",
 "vite": "^4.0.0"
}

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.

To start the application run the following command

npm start

Output