project(stopwatch): Application completed (#18)

Author: SUVAJIT-KARMAKAR

src/App.jsx

@@ -8,8 +8,11 @@ import HandlingForm from "./components/Hooks/useRefHook/HandlingForm";
 import FormDetails from "./tryityourself/Akash/FormDetails";
 import RandomBackground from "./tryityourself/Akash/RandomBackground";
 
+// PROJECTS
+import StopWatch from "./project/StopWatch/StopWatch";
+
 const App = () => {
-  return <RandomBackground />;
+  return <StopWatch />;
 };
 
 export default App;

src/index.css

@@ -2,3 +2,4 @@
 @import "./components/Hooks/useRefHook/HandlingForm.style.css";
 @import "./tryityourself/Akash/FormDetails.style.css";
 @import "./tryityourself/Akash/RandomBackground.style.css";
+@import "./project/StopWatch/StopWatch.style.css";

src/project/StopWatch/StopWatch.jsx

@@ -0,0 +1,66 @@
+import React, { useEffect, useRef, useState } from "react";
+
+// ICONS
+import { FaPlay } from "react-icons/fa";
+import { FaPause } from "react-icons/fa6";
+import { LuTimerReset } from "react-icons/lu";
+
+const StopWatch = () => {
+  // STATES
+  const [isRunning, setIsRuning] = useState(() => {
+    return false;
+  });
+  const [elapsedTime, setElapsedTime] = useState(0);
+  const startTimeRef = useRef(0);
+  const intervalTimeRef = useRef(null);
+
+  //   SIDE-EFFECTS
+  useEffect(() => {
+    if (isRunning) {
+      startTimeRef.current = Date.now() - elapsedTime;
+      intervalTimeRef.current = setInterval(() => {
+        setElapsedTime(Date.now() - startTimeRef.current);
+      }, 10);
+
+      return () => clearInterval(intervalTimeRef.current);
+    }
+  }, [isRunning]);
+
+  //   HANDLER FUNCTIONS
+  const handleStartOrStop = () => {
+    return setIsRuning((previous) => !previous);
+  };
+
+  const handleReset = () => {
+    setIsRuning(false);
+    setElapsedTime(0);
+  };
+
+  const displayStopWatchTime = (elapsedTime) => {
+    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);
+    return `
+    ${hours.toString().padStart(2, "0")}:
+    ${minutes.toString().padStart(2, "0")}:
+    ${seconds.toString().padStart(2, "0")}:
+    ${milliseconds.toString().padStart(2, "0")}`;
+  };
+
+  return (
+    <div className="CONTAINER">
+      <div className="text-6xl">{displayStopWatchTime(elapsedTime)}</div>
+      <div className="mt-3 flex items-center justify-center gap-3">
+        <button className="BUTTON" onClick={handleStartOrStop}>
+          {isRunning ? <FaPause size={20} /> : <FaPlay size={20} />}
+        </button>
+        <button className="BUTTON" onClick={handleReset}>
+          <LuTimerReset size={20} />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default StopWatch;

src/project/StopWatch/StopWatch.style.css

@@ -0,0 +1,7 @@
+.CONTAINER {
+  @apply h-screen w-full flex flex-col items-center justify-center bg-slate-500 text-black;
+}
+
+.BUTTON {
+  @apply p-2 rounded-md border-1 border-black hover:bg-black hover:text-white hover:cursor-pointer;
+}