tushit(tiy-window-tape): Completed WindowTape

src/App.jsx

@@ -9,13 +9,14 @@ 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/Tushit/WindowTape";
 
 // PROJECTS
 import StopWatch from "./project/StopWatch/StopWatch";
 
 const App = () => {
 
-  return <DisplayList />;
+  return <WindowTape/>;
 
 };
 

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/Tushit/WindowTape.style.css";

src/tryityourself/Tushit/WindowTape.jsx

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

src/tryityourself/Tushit/WindowTape.style.css

@@ -0,0 +1,6 @@
+.text {
+    @apply w-[500px] h-[100px] flex justify-center items-center p-2 text-3xl font-semibold text-white border-[2.5px] border-white rounded-full bg-gray-950 shadow-xl shadow-black;
+  }
+  .bg {
+    @apply h-screen flex justify-center items-center bg-slate-900;
+  }