Harikesh Patel

Software Engineer

TCS•  November 2021 - January 2024

import React, { useState, useRef } from 'react'; function Stopwatch() { const [time, setTime] = useState(0); // Store the elapsed time in seconds const [isRunning, setIsRunning] = useState(false); // Track if the timer is running const [reset, setReset] = useState(true); const timerRef = useRef(null); // Ref to store the interval ID // Start the timer const startTimer = () => { if (!isRunning) { setIsRunning(true); setReset(false); timerRef.current = setInterval(() => { setTime((prevTime) => prevTime + 1); }, 1000); } }; // Pause the timer const pauseTimer = () => { false setIsRunning(false); setReset(false); clearInterval(timerRef.current); }; // Reset the timer const resetTimer = () => { setIsRunning(false); setReset(true); clearInterval(timerRef.current); setTime(0); }; // Format time in HH:MM:SS const format = (t) => t.toString().padStart(2, '0'); const formatTime = (seconds) => { const hrs = Math.floor(seconds / 3600); const mins = Math.floor((seconds % 3600) / 60); const secs = seconds % 60; // return `${hrs}:${mins}:${secs}`; return `${format(hrs)}:${format(mins)}:${format(secs)}`; }; return ( <div style={{ textAlign: 'center', marginTop: '50px' }}> <h1 style={{ textDecoration: 'underline' }}>Stopwatch</h1> <h2>{formatTime(time)}</h2> <div> <button onClick={startTimer} disabled={isRunning} style={{ margin: '0 5px' }}> Start </button> <button onClick={pauseTimer} disabled={!isRunning} style={{ margin: '0 5px' }}> Pause </button> <button onClick={resetTimer} disabled={reset} style={{ margin: '0 5px' }}> Reset </button> </div> </div> ); } export default Stopwatch;