Breaking News: Grepper is joining You.com. Read the official announcement!

stopwatch by react

Better Buzzard answered on March 1, 2023 Popularity 9/10 Helpfulness 4/10

answer stopwatch by react

related stopwatch in react

stopwatch by react

Comment

const Stopwatch = () => {
  const [time, setTime] = useState(0);
  const [running, setRunning] = useState(false);
  useEffect(() => {
    let interval;
    if (running) {
      interval = setInterval(() => {
        setTime((prevTime) => prevTime + 10);
      }, 10);
    } else if (!running) {
      clearInterval(interval);
    }
    return () => clearInterval(interval);
  }, [running]);
  return (
    <div className="stopwatch">
      <div className="numbers">
        <span>{("0" + Math.floor((time / 60000) % 60)).slice(-2)}:</span>
        <span>{("0" + Math.floor((time / 1000) % 60)).slice(-2)}:</span>
        <span>{("0" + ((time / 10) % 100)).slice(-2)}</span>
      </div>
      <div className="buttons">
        <button onClick={() => setRunning(true)}>Start</button>
        <button onClick={() => setRunning(false)}>Stop</button>
        <button onClick={() => setTime(0)}>Reset</button>       
      </div>
    </div>
  );
};
Code language: JavaScript (javascript)

Popularity 9/10 Helpfulness 4/10 Language javascript

Source: w3collective.com

Tags: javascript stopwatch

Link to this answer
Share Copy Link

Contributed on Mar 01 2023

Better Buzzard

0 Answers Avg Quality 2/10

Closely Related Answers

stopwatch in react

Comment

// *Stopwatch

import { useEffect, useState } from "react";

const StopwatchTry = () => {
  const [time, setTime] = useState({
    min: 0,
    sec: 0,
  });
  const [runing, setRunning] = useState(false);

  useEffect(() => {
    let interval;
    if (runing) {
      interval = setInterval(() => {
        setTime((prev) => ({
          ...prev,
          sec: prev.sec + 1,
        }));
      }, 1000);
    } else {
      clearInterval(interval);
    }
    return () => {
      clearInterval(interval);
    };
  }, [runing]);

  const start = () => {
    setRunning(true);
  };

  const stop = () => {
    setRunning(false);
  };
  const reset = () => {
    setTime({
      min: 0,
      sec: 0,
    });
  };
  return (
    <>
      <div>
        {time.min}m {time.sec}s
      </div>
      <div>
        <button onClick={start}>Start</button>
        <button onClick={stop}>Stop</button>
        <button onClick={reset}>Reset</button>
      </div>
    </>
  );
};

export default StopwatchTry;

Popularity 9/10 Helpfulness 5/10 Language javascript

Source: Grepper

Tags: stopwatch javascript javasc

Link to this answer
Share Copy Link

Contributed on Sep 15 2023

Abhishek

0 Answers Avg Quality 2/10

stopwatch by react

Contents

More Related Answers

stopwatch by react

Closely Related Answers

stopwatch in react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.