Merge branch 'main' of https://github.com/snippet-labs/REACTLAB into susanta/tiy-widnow-tape

Author: h4jack

src/App.jsx

@@ -9,14 +9,13 @@ import DisplayList from "./components/Hooks/useCallback/DisplayList";
 // TRY IT YOURSELF COMPONENTS
 import FormDetails from "./tryityourself/Akash/FormDetails";
 import RandomBackground from "./tryityourself/Akash/RandomBackground";
+import WindowTape from "./tryityourself/Akash/WindowTape";
 
 // PROJECTS
 import StopWatch from "./project/StopWatch/StopWatch";
 
 const App = () => {
-
-  return <DisplayList />;
-
+  return <WindowTape />;
 };
 
 export default App;

src/index.css

@@ -3,3 +3,4 @@
 @import "./tryityourself/Akash/FormDetails.style.css";
 @import "./tryityourself/Akash/RandomBackground.style.css";
 @import "./project/StopWatch/StopWatch.style.css";
+@import "./tryityourself/Akash/WindowTape.style.css";

src/tryityourself/Akash/WindowTape.jsx

@@ -0,0 +1,23 @@
+import React, { useState, useEffect } from "react";
+
+const WindowTape = () => {
+  const [height, setHeight] = useState(window.innerHeight);
+  const [width, setWidth] = useState(window.innerWidth);
+
+  useEffect(() => {
+    const handleHeight = () => setHeight(window.innerHeight);
+    window.addEventListener("resize", handleHeight);
+    const handleWidth = () => setWidth(window.innerWidth);
+    window.addEventListener("resize", handleWidth);
+  }, []);
+
+  return (
+    <div className="Background">
+      <div className="ScreenSize">
+        {width} x {height}
+      </div>
+    </div>
+  );
+};
+
+export default WindowTape ;

src/tryityourself/Akash/WindowTape.style.css

@@ -0,0 +1,7 @@
+.ScreenSize {
+  @apply w-[500px] h-[100px] flex justify-center items-center p-2 text-3xl font-semibold text-white border-[2.5px] border-white rounded-md bg-gray-950 shadow-xl shadow-black;
+}
+
+.Background {
+  @apply h-screen flex justify-center items-center bg-orange-700;
+}