add timer

package-lock.json

@@ -20,6 +20,7 @@
         "eslint-plugin-react-hooks": "^5.2.0",
         "eslint-plugin-react-refresh": "^0.4.19",
         "globals": "^16.0.0",
+        "prettier": "3.5.3",
         "vite": "^6.3.1"
       }
     },
@@ -2419,6 +2420,22 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.3.tgz",
+      "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",

package.json

@@ -22,6 +22,7 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^16.0.0",
+    "prettier": "3.5.3",
     "vite": "^6.3.1"
   }
 }

src/components/TimeDuration.jsx

 import { convertInput, useTimeInput } from "../utils/timeUtils";
+import { useState, useRef } from "react";
+// useState is a React hook that lets you store and manage state within functional components.
+// It returns an array with two elements:
+// State value (current state)
+// Setter function (to update this state)
 
 function TimeDuration() {
-    const {second} = convertInput();
+  const [hour, setHour] = useState(""); //both hour and setHour is empty string,
+  const [minute, setMinute] = useState("");
+  const [second, setSecond] = useState(0);
+
+  const intervalID = useRef(null); // This holds the interval ID across renders
+
+  const handleTimeInput = () =>{
+    const second = convertInput(hour,minute);
+    return second
+  }
+
+  function runTime(){
+    intervalID.current = setInterval(()=>{
+      setSecond(prev => {
+        if(prev == 0){
+          clearInterval(intervalID.current); 
+          return 0;
+        }
+        return prev - 1
+      })
+    }, 1000
+    )
+  }
+
+  function startTimer(){
+    const totalSec = handleTimeInput();
+    setSecond(totalSec); //set the second only when the user prompt inputs
+    runTime();
+  }
+
   return (
     <div className="time-duration-box">
       <h3>Time Duration</h3>
       <div className="time-boxes">
-                <input type = "number" id = "hour-input" placeholder="Hour"/>
-                <input type = "number" id = "minute-input" placeholder="Minutes"/>
+        <input
+          type="number"
+          id="hour-input"
+          placeholder="Hour"
+          value={hour}
+          onChange={(e) => setHour(e.target.value)}
+        />
+        <input
+          type="number"
+          id="minute-input"
+          placeholder="Minute"
+          value={minute}
+          onChange={(e) => setMinute(e.target.value)}
+        />
       </div>
-            <button onClick={console.log(second)}>rereive time</button>
-            <button></button>
+      <button onClick={()=>console.log(handleTimeInput())}>rereive time</button>
+      <button onClick={startTimer}>Timer</button>
+      <button onClick={() => clearInterval(intervalID.current)}>Stop timer</button>
+      <button onClick={runTime}>Resume</button>
+      <button onClick={() => setSecond(0)}>Reset timer</button>
+      <h3>Hour: {Math.floor(second / 3600)}</h3>
+      <h3>Minute: {Math.floor((second % 3600) / 60)}</h3>
+      <h3>Second: {second % 60}</h3>
     </div>
   );
 }
-export default TimeDuration
+export default TimeDuration;
\ No newline at end of file

src/utils/timeUtils.js

@@ -4,15 +4,13 @@ export function useTimeInput(){
     return {hour, minute}
 }
 
-export function convertInput(){
-    let {hour, minute} = useTimeInput();
-    if(minute > 60){
-        hour += Math.floor(minute/60)
-        minute = minute % 60
+export function convertInput(hour, minute){
+    let hr = Number(hour)
+    let min = Number(minute)
+    if(min > 60){
+        hr += Math.floor(min/60)
+        min = min % 60
     }
-    
-    console.log(hour,minute)
-
-    const second = hour*3600 + minute*60
+    const second = hr*3600 + min*60
     return second
 }
\ No newline at end of file