ReactJS Stopwatch

index.html

<div id="container"></div>

reactjs-stopwatch.markdown

ReactJS Stopwatch

Forked from Brian Hague's Pen WDI React Starter.

A Pen by vignesh on CodePen.

License.

script.babel

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('container')
);

function Time(props){
  return (
  <p>{("0" + Math.floor((props.time / 60000) % 60)).slice(-2)}:{("0" + Math.floor((props.time / 1000) % 60)).slice(-2)}:{("0" + ((props.time / 10) % 100)).slice(-2)}</p>);
}

function App() {
const [isActive, setIsActive] = React.useState(false);
  const [isPaused, setIsPaused] = React.useState(true);
  const [time, setTime] = React.useState(0);
  const [lap, setLap] = React.useState([]);
  
  React.useEffect(() => {
    let interval = null;
  
    if (isActive && !isPaused) {
      interval = setInterval(() => {
        setTime((time) => time + 10);
      }, 10);
    } else {
      clearInterval(interval);
    }
    return () => {
      clearInterval(interval);
    };
  }, [isActive, isPaused]);
  
  const handleStart = () => {
    setIsActive(true);
    setIsPaused(false);
  };
  
  const handlePauseResume = () => {
    if(isActive){
      setIsPaused(!isPaused);
    }
  };
  
   const handleLap = (time) => {
    if(isActive && !isPaused && lap.indexOf(time)===-1){
      setLap(lap => [time ,...lap]); 
    }
  };
  
  const handleReset = () => {
    setIsActive(false);
    setTime(0);
    setLap([]);
    setIsPaused(true);
  };
  return (
    <div className="App">
      <div className="title">Stopwatch</div>
      <div className="stopwatch">
        <Time time={time} />
        <div className="lapTimer">
          {lap.map(lapTime => (
            <Time time={lapTime} />
          ))}
        </div>
      </div>
      <div className="controls">
        {!isActive && isPaused && (
          <div className="control-icon" onClick={handleStart}>Play <i className="fas fa-play"></i></div>
        )}
        {isActive && (
            <div className="control-icon" onClick={handlePauseResume}>{!isPaused ? "Pause" : "Resume"}
            <span style={{"display": isPaused ? "none": "inline"}}>
            &nbsp;<i className="fas fa-pause"></i></span>
          <span style={{"display": !isPaused ? "none": "inline"}}>
            &nbsp;<i className="fas fa-play"></i></span>
         </div>
        )}
        
      
        
        <div className="control-icon" onClick={handleReset}>Reset <i className="fas fa-hourglass-start"></i>
</div>
        <div className="control-icon" onClick={()=>handleLap(time)}>Lap <i className="fas fa-flag"></i>

</div>
      </div>
    </div>
  );
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

style.scss

.App{
  width: 600px;
  margin: auto;
  text-align: center;
  font-family: sans-serif;
}

.title{
  font-size: 50px;
  text-transform: uppercase;
  color: white;
  background-color: pink;
  box-shadow: 1px 1px 1px 1px #e0e0e0;
  border-radius: 10px;
  margin: 30px 0;
}

.stopwatch{
  font-size: 80px;
  font-weight: 500;
  .lapTimer{
    font-size: 60px;
    font-weight: 100;
    opacity: 0.8;
    height: 130px;
    overflow-y: scroll;
  }
}

.controls{
  display: flex;
  font-size: 20px;
  align-items: center;
  justify-content: center;
  .control-icon{
    background-color: pink;
    margin: 10px;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    i {
      margin-left: 20px;
    }
  }
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />