Build A Stopwatch In React JS Mini Project | useState Hook & Conditionals

Build A Stopwatch Using React JS Mini Project | useState Hook & Conditionals

Are you new to React JS and looking for a useful project to enhance your knowledge? Creating a stopwatch is a great way to learn React while creating something practical. This is one of the most popular projects for novice React developers, as it covers important ideas such as using components, handling state, timing functions, and creating an explicit interval function.

Stopwatch Demo :

In this blog article, I will tell you about using React JS and CSS to build a Stopwatch. This app facilitates users in managing their workload. Helps in managing and measuring lap times and other performance indicators.

Let’s have an interactive look at what our final project will look like:

Asset Link : Link

Technologies Used/Pre-requisites:

The dependencies in package.json :

{
  "name": "counter_app",
  "version": "0.1.0",
  "homepage": "https://ziontutorial.com/demos/stopwatch",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@mui/material": "^5.10.11",
    "@testing-library/jest-dom": "^5.16.5",
    "@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"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Steps to create React Application And Installing Module

Step 1: Create a React application using the following command:

npx  create-react-app  projectname

cd projectname

Step 2: To run the application:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Example: Insert the below code in the respective files.

App.js: All the logic of this application for weather application i have write in the App.js file
Index.css: You guys can also write the styling part in the index.css or app.css but in this application case we will write all the css code in the index.css file

App.js

In this app.js file i have write all the logic related with stopwatch app . Also i have added jsx for building the user interface you can easily manipulate user interface .

import './App.css';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import { useState, useRef } from 'react';

function App() {
  const [time, setTime] = useState(0);
  const [isRunning, setIsRunning] = useState(false);
  const timerRef = useRef(null);

  const handleToggle = () => {
    if (isRunning) {
      console.log(timerRef.current)
      clearInterval(timerRef.current);
      console.log(timerRef.current)
      setIsRunning(false);
    } else {
      setIsRunning(true);
      timerRef.current = setInterval(() => {
        setTime(prevTime => prevTime + 2000);
      }, 2000);
    }
  };

  const handleReset = () => {
    clearInterval(timerRef.current);
    setIsRunning(false);
    setTime(0);
  };

  const formatTime = (time) => {
    const milliseconds = `0${(time % 1000) / 10}`.slice(-2);
    const seconds = `0${Math.floor((time / 1000) % 60)}`.slice(-2);
    const minutes = `0${Math.floor((time / 60000) % 60)}`.slice(-2);
    return `${minutes}:${seconds}:${milliseconds}`;
  };

  return (
    <div className="app">
      <div className='container'>
        <div className='total_amount_card' style={{ backgroundImage: `linear-gradient(to right, rgba(253, 230, 90, 100%), rgba(204, 254, 87, 100%))` }}>
          <div className='right'>
            <svg onClick={handleReset} xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24" width="17" height="17"><path d="M21.962,12.875A10.03,10.03,0,1,1,19.122,5H16a1,1,0,0,0-1,1h0a1,1,0,0,0,1,1h4.143A1.858,1.858,0,0,0,22,5.143V1a1,1,0,0,0-1-1h0a1,1,0,0,0-1,1V3.078A11.985,11.985,0,1,0,23.95,13.1a1.007,1.007,0,0,0-1-1.1h0A.982.982,0,0,0,21.962,12.875Z" /></svg>
          </div>
          <div className='card_text '>
            <h3 className='total_amount_heading'>{formatTime(time)}</h3>
          </div>
        </div>
        <form>
          <div className='button_collection'>
            <Stack className='center_button' spacing={2} direction="row">
              <Button onClick={handleToggle} variant="contained" className='btn_one'>
                {isRunning ? (

                  <svg width="25" height="25" viewBox="0 0 39 50" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect width="13" height="50" rx="2" fill="#656565" />
                    <rect x="25" width="14" height="50" rx="2" fill="#656565" />
                  </svg>
                ) : (
                  <svg width="30" height="30" viewBox="0 0 98 98" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M81.5 39.4737C88.8334 43.7076 88.8333 54.2924 81.5 58.5263L41 81.909C33.6666 86.1429 24.5 80.8505 24.5 72.3827L24.5 25.6173C24.5 17.1495 33.6667 11.8571 41 16.091L81.5 39.4737Z" fill="#656565" />
                  </svg>
                )}
              </Button>
            </Stack>
          </div>
        </form>
      </div>
    </div>
  );
}

export default App;

Index.css

In this file i have put my styling for fonts and other stufs for

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* background-image: url('/public/bg.jpg'); */
  background-color: #F0EFED;
  font-family: 'Poppins', sans-serif;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

App.css

This is app.css file where we have save all the styling related with application .

.app {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

.container {
  background-color: #FAF9FA;
  border-radius: 8px;
  padding: 3rem;
  margin-top: 6rem;
  width: 400px;
}

.center_button
{
  display: flex;
  justify-content: center;
  align-items: center;
  
}

.heading_text {
  font-size: 15px !important;
  font-weight: 400;
}

.heading_two {
  padding-top: 5px;
}

.total_amount_card {
  height: 400px;
  background-color: #D6FF58;
  border-radius: 50%;
}

.right {
  float: right;
  margin-top: -2rem;
}

.card_text {
  padding-top: 40px;
}

.total_amount_heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 60px;
  font-weight: 800;
  padding-top: 4rem;
}

.total_amount_para {
  text-align: center;
  font-size: 18px !important;
  padding-top: 5px;
  color: #4B4B4B;
}

.input_area {
  margin-top: 40px;
}

.input_field {
  margin-top: 30px;
  width: 445px;
}

#outlined-basic {
  width: 410px;
}

.button_collection {
  margin-top: 61px;
  margin-bottom: 1rem;
}

.btn_one {
  background-color: #F2F2F2 !important;
  width: 75px;
  border-radius: 100px !important;
  height: 75px;
  color: black !important;
  font-weight: 600;
  font-size: 20px !important;

}

.btn_two {
  background-color: #F2F2F2 !important;
  width: 200px;
  height: 75px;
  color: black !important;
  font-size: 20px !important;

}

People are also reading: