Home
Javascript
Step-by-Step Implementation of the Stopwatch

Implementation of Stopwatch

Step-by-Step Implementation of the Project

Step-by-Step Implementation of the Project

In this lesson, we will get our hands dirty with the actual implementation of a stopwatch application in React JS. Let’s get started with the initial project setup!

Set up the environment

As the first step to get started with the implementation, we need to set up the environment for the project. Follow the below steps to set up the project.

Open VScode
Create a new folder named ‘stopwatch’
Open ‘new terminal’
Enter the command ‘npx create-react-app app’. This will create a new React JS project with the name ‘app’.
Once the installation is complete, enter the command ‘cd app & npm start’ to start the React JS application in localhost:3000.

After removing the unnecessary files and folders, the app directory will look like this.

Create Application Structure

In this step, we will create the basic structure to the application such as container, buttons and display area. This will make it easy to view the elements we need for the application.

For the stopwatch, we need one display area to run the timer and three button controls such as start, stop and reset.
As the first stage, create a components folder in the src directory and create a file with the name ‘Stopwatch.jsx’

Now, copy and paste the code to create the basic structure of the application.

// Stopwatch.jsx 


// Functional Component to Create the Stopwatch 
function Stopwatch() {
  return (
    // The main container 
    <div> 
         // The Display container 
      <div>
       <h1>00:00:00</h1>
      // The controls container 
        <div>
           // The Start button 
          <button>
            Start
          </button>
          // The Stop button 
          <button>
            Stop
          </button>
          // The Reset button 
          <button>
            Reset
          </button>
        </div>
      </div>
    </div>
  );
}


export default Stopwatch; // Export the Stopwatch component

After the stopwatch component export, you need to import the component in the main component ‘App.jsx’ since it is the entry point for your application.
Modify the code in ‘App.jsx’ file similar to the below code.

// App.jsx 


// Import the Stopwatch component 
import Stopwatch from "./components/Stopwatch";


function App() {
  return (
    // The main container 
    <div>
// Application Title 
      <h1>Stopwatch</h1>
    // Use Stopwatch component 
      <Stopwatch />
      <a href="https://www.guvi.in/">
        Made by Guvi💚
      </a>
    </div>
  );
}


export default App;

After updating the App component, you will see the following result.

Apply Styles to the Application

The next step is to add styles to each element to make it visually appealing using CSS. We can create n styling files one for each component. In this project, we will create two css files, one for the stopwatch component and another for the App component.

Modify the Stopwatch component to add styling for each element. Using the ‘className’ attribute, we can match the styling to the element. Make sure to import the style file into the component.

// Stopwatch.jsx


import "./Stopwatch.css";


function Stopwatch() {
  return (
    <div className="stopwatch-container">
     
      <div className="display-container">
        {formatTime()}
        <div className="controls">
          <button className="start-btn" onClick={start}>
            Start
          </button>
          <button className="stop-btn" onClick={stop}>
            Stop
          </button>
          <button className="reset-btn" onClick={reset}>
            Reset
          </button>
        </div>
      </div>
    </div>
  );
}


export default Stopwatch;

The next step is to create a styling file for stopwatch. Create a file in the component folder ‘Stopwatch.css’. And write styles for each element.

/* Stopwatch.css */


/* Main body styling */
body{
    height: 100vh; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: hsl(0, 6%, 90%);
}


/* Main container for stopwatch component */
.stopwatch-container{
    display: flex;
    flex-direction: column;
    align-items: center;
}


/* Display area */
.display-container{
    border: 5px solid #000;
    border-radius: 50px;
    background-color: #fff;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 3.5rem;
    gap: 2.5rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    color: rgb(74, 71, 71);
    margin: 2rem 2.5rem;
}


/* General styling for buttons */
button{
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 550;
    border: 3px solid #000;
    border-radius: 50px;
    margin: 0 1.5rem;
    cursor: pointer;
    min-width: 120px;
    transition: background-color 0.3s ease;
    color: #fff;
}


/* General positioning of controls */
.controls{
    display: flex;
    justify-content: space-between;
    gap: 2rem;
}


/* Start button */
.start-btn{
    background-color: green;
}


.start-btn:hover{
    background-color: hsl(120, 100%, 50%);
}


/* Stop button */
.stop-btn{
    background-color: rgb(167, 7, 7);
}


.stop-btn:hover{
    background-color: hsl(0, 100%, 56%);
}


/* Reset button */
.reset-btn{
    background-color: rgb(6, 22, 197);
}


.reset-btn:hover{
    background-color: hsl(205, 100%, 50%);
}

Now, let’s add some styling to the App component.

// App.js
import "./App.css";
import Stopwatch from "./components/Stopwatch";


function App() {
  return (
    <div className="container">
      <h1 className="title">Stopwatch</h1>
      <Stopwatch />
      <a href="https://www.guvi.in/" className="copywright">
        Made by Guvi💚
      </a>
    </div>
  );
}


export default App;

Modify the App.css file to include new stylings.

/* App.css */


.container{
    display: flex;
    flex-direction: column;
    align-items: center;
   
}
.title{
    font-size: 3rem;
}
.copywright{
    color: #333;
    text-decoration: none;
}

Once you add the styling, the application will look like the below output.

Add Logic to the Application

The last part of the application is to add the logic for each button and connect the controls to the display. To do that, you do not need to create a separate file. We can achieve the logic by using useEffect(), useState() and useRef() functions we saw in the previous module.

Add the logic to the stopwatch component.

// Stopwatch.jsx


// Import the functions from the react package
import React, { useState, useEffect, useRef } from "react";


function Stopwatch() {


  // Define the variables
  const [isRunning, setIsRunning] = useState(false);
  const [elapsedTime, setElapsedTime] = useState(0);
  const startTimeRef = useRef(0);
  const intervalIdRef = useRef(null);


  // To set the elapsed time according to controls (start or stop)
  useEffect(() => {
    if(isRunning){
        intervalIdRef.current = setInterval(() =>{
            setElapsedTime(Date.now() - startTimeRef.current);
        }, 10); // It occurs every 10 ms if there is any change in the run state
    }


    // Clear the display
    return () =>{
        clearInterval(intervalIdRef.current);
    }
  }, [isRunning]);


  // Logic behind start button
  function start() {
    setIsRunning(true);
    startTimeRef.current = Date.now() - elapsedTime;
  }


  // Logic behind stop button
  function stop() {
    setIsRunning(false);
  }


  // Logic behind reset button
  function reset() {
    setIsRunning(false);
    setElapsedTime(0);
  }


  // Logic behind display timer
  function formatTime() {
    let hours = Math.floor(elapsedTime / (1000 * 60 * 60));
    let minutes = Math.floor((elapsedTime / (1000 * 60)) % 60);
    let seconds = Math.floor((elapsedTime / (1000)) % 60);
    let milliseconds = Math.floor((elapsedTime % 1000) / 10);


    hours = String(hours).padStart(2, "0");
    minutes = String(minutes).padStart(2, "0");
    seconds = String(seconds).padStart(2, "0");
    milliseconds = String(milliseconds).padStart(2, "0");


    return `${hours} : ${minutes} : ${seconds} : ${milliseconds}`;
  }
  return (
    <div className="stopwatch-container">
     
      <div className="display-container">
        {formatTime()}
        <div className="controls">
          <button className="start-btn" onClick={start}>
            Start
          </button>
          <button className="stop-btn" onClick={stop}>
            Stop
          </button>
          <button className="reset-btn" onClick={reset}>
            Reset
          </button>
        </div>
      </div>
    </div>


  );
}


export default Stopwatch;

With adding the logic to the component, you will now be able to see the entire working of the controls and display. The output will look like this

Congratulations 🎉!

You have successfully created your own stopwatch application.

In the next lesson, we will look into the steps to deploy the project using vercel.

See you in the next lesson!

Recommended Handbooks

4.7

C++ Handbook

Level up your programming skills with our C++ Tutorials hub, guiding you from beginner to advanced. Start your journey now!

English

5966

3 hrs

4.7

Python Basics Handbook

Level up your programming skills with our Python Tutorials hub, guiding you from beginner to advanced. Start your journey now!

English

6078

3.5 hrs

4.6

Javascript Handbook

Level up your programming skills with our JavaScript Tutorials hub, guiding you from beginner to advanced. Start your journey now!

English

5752

2 hrs

Build Your Stopwatch Using ReactJS

Start your first project in React JS by building an interactive stopwatch application.

English

2 hrs

Building a Random Joke Generator Using ReactJS

Build a React app that fetches and displays random programming jokes using JokeAPI. Simple, fun, and perfect for beginners learning API calls and state management.

English

0.5 hrs

Build a Character Counter in React JS

Start your first project in React JS by building an interactive character counter application.

English

1.5 hrs

Build Your QR Code Generator using React JS

Start your first project in React JS by building a dynamic QR generator application.

English

2 hrs

Build a Birthday Reminder App using React JS

Start your first project in React JS by building a dynamic Birthday Reminder app that uses components and state to manage and display a list of birthdays.

English

1.5 hrs

Building Random Password Generator using ReactJS

A React-based app to generate strong, customizable passwords with copy-to-clipboard support. Live and responsive via Netlify.

English

0.5 hrs

Temperature Converter Project in React

A beginner-friendly React app that converts temperatures between Celsius, Fahrenheit, and Kelvin with real-time results and clean CSS styling. Live on Netlify.

English

0.5 hrs

Building a To-Do List App Using ReactJS

Build a React To-Do List App that lets users add, edit, complete, and delete tasks in real-time. Clean UI, no backend, and perfect for mastering React basics.

English

0.5 hrs

Building a Weather App Project Using ReactJS

Build a React app that fetches and displays real-time weather data with animated icons, live clock, and a sleek UI. Great for beginners to learn React, APIs, and state management.

English

0.5 hrs

Building a Quiz App in ReactJS

Build a React Quiz App with category selection, random questions, and a live scorecard. Clean UI, no backend, and perfect for mastering React fundamentals.

English

0.5 hrs

Building a GenZ Carousel App in React

Build a Gen-Z Image Carousel App with uploads, animated slides, and thumbnail navigation. No backend needed—perfect for learning React, hooks, and styling basics.

English

0.5 hrs

Implementation of Stopwatch

Contents

Step-by-Step Implementation of the Project

Set up the environment

Create Application Structure

Apply Styles to the Application

Add Logic to the Application

ReactJS Projects

Recommended Handbooks

C++ Handbook

Python Basics Handbook

Javascript Handbook

Build Your Stopwatch Using ReactJS

Building a Random Joke Generator Using ReactJS

Build a Character Counter in React JS

Build Your QR Code Generator using React JS

Build a Birthday Reminder App using React JS

Building Random Password Generator using ReactJS

Temperature Converter Project in React

Building a To-Do List App Using ReactJS

Building a Weather App Project Using ReactJS

Building a Quiz App in ReactJS

Building a GenZ Carousel App in React