Merge branch 'main' of github.com:snippet-labs/REACTLAB

Author: SUVAJIT-KARMAKAR

src/App.jsx

@@ -1,16 +1,22 @@
 // COMPONENTS
 import Greeting from "./components/Basics/Greeting";
-// import CounterEffect from "./components/Hooks/useEffectHook/Counter1";
-import Counter from "./components/Hooks/useStateHook/Counter";
+// import Counter from "./components/Hooks/useStateHook/Counter";
 import Form from "./project/Form";
 import ThemeToggler from "./project/ThemeToggler";
 import HandlingForm from "./components/Hooks/useRefHook/HandlingForm";
-
+import ChangeTheme from "./components/Hooks/useMemo/ChangeTheme";
+import DisplayList from "./components/Hooks/useCallback/DisplayList";
 // TRY IT YOURSELF COMPONENTS
-// import ModifiedCounter from "./tryityourself/tushit/ModifiedCounter";
+import FormDetails from "./tryityourself/Akash/FormDetails";
+import RandomBackground from "./tryityourself/Akash/RandomBackground";
+
+// PROJECTS
+import StopWatch from "./project/StopWatch/StopWatch";
 
 const App = () => {
-  return <HandlingForm />;
+
+  return <DisplayList />;
+
 };
 
 export default App;

src/components/Hooks/useCallback/DisplayList.jsx

@@ -0,0 +1,36 @@
+import { useCallback, useState } from "react";
+import List from "./List";
+
+const DisplayList = () => {
+  const [number, setNumber] = useState(1);
+  const [dark, setDark] = useState(false);
+
+  // const getItems = () => {
+  //   return [number, number + 1, number + 2];
+  // };
+
+  const getItems = useCallback(() => {
+    return [number, number + 1, number + 2];
+  }, [number]);
+
+  const theme = {
+    backgroundColor: dark ? "black" : "white",
+    color: dark ? "white" : "black",
+  };
+
+  return (
+    <div style={theme}>
+      <input
+        type="number"
+        value={number}
+        onChange={(e) => setNumber(parseInt(e.target.value))}
+      ></input>
+      <button onClick={() => setDark((prevDark) => !prevDark)}>
+        Change theme
+      </button>
+      <List getItems={getItems} />
+    </div>
+  );
+};
+
+export default DisplayList;

src/components/Hooks/useCallback/List.jsx

@@ -0,0 +1,15 @@
+import { useEffect, useState } from "react";
+
+const List = ({ getItems }) => {
+  const [items, setItems] = useState([]);
+
+  useEffect(() => {
+    setItems(getItems());
+
+    console.log("Updating items");
+  }, [getItems]);
+
+  return items.map((item, index) => <div key={index}>{item}</div>);
+};
+
+export default List;

src/components/Hooks/useMemo/ChangeTheme.jsx

@@ -0,0 +1,37 @@
+import { useMemo, useState } from "react";
+
+const ChangeTheme = () => {
+  const [number, setNumber] = useState(0);
+  const [dark, setDark] = useState(false);
+
+  const doubleNumber = useMemo(() => {
+    return slowFunction(number);
+  }, [number]);
+
+  const themeStyles = {
+    backgroundColor: dark ? "black" : "white",
+    color: dark ? "white" : "black",
+  };
+
+  function slowFunction(num) {
+    console.log("Calling slow function");
+    for (let i = 0; i <= 1000000000; i++) {}
+    return num * 2;
+  }
+
+  return (
+    <>
+      <input
+        type="number"
+        value={number}
+        onChange={(e) => setNumber(e.target.value)}
+      ></input>
+      <button onClick={() => setDark((prevDark) => !prevDark)}>
+        Change theme
+      </button>
+      <div style={themeStyles}>{doubleNumber}</div>
+    </>
+  );
+};
+
+export default ChangeTheme;

src/components/Hooks/useStateHook/Counter.jsx

@@ -1,21 +1,20 @@
-import React from 'react'
-import { useState } from 'react'
+import React from "react";
+import { useState } from "react";
 const Counter = () => {
-    const [count, setCount] = useState(0);
- 
-    // let a =0;
-    // function add (){
-    //     a =+1;
-    //     console.log(a);
-    // }
-    console.log("Component Rendered")
+  const [count, setCount] = useState(0);
+  // let a =0;
+  // function add (){
+  //     a =+1;
+  //     console.log(a);
+  // }
+  console.log("Component Rendered");
   return (
     <div>
-        <button onClick={() => setCount(count +1)}>Add</button>
-        <h1>{count}</h1>
-        <button onClick={() => setCount(count -1)}>Subtract</button>
+      <button onClick={() => setCount(count + 1)}>Add</button>
+      <h1>{count}</h1>
+      <button onClick={() => setCount(count - 1)}>Subtract</button>
     </div>
-  )
-}
+  );
+};
 
-export default Counter;
+export default Counter;

src/index.css

@@ -1,2 +1,5 @@
 @import "tailwindcss";
 @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;
+}