diff --git a/src/App.jsx b/src/App.jsx index f6bf3b1..eeb5dd9 100644 --- a/src/App.jsx +++ b/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 ; + return ; }; diff --git a/src/index.css b/src/index.css index 3a47964..1321f0c 100644 --- a/src/index.css +++ b/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"; \ No newline at end of file diff --git a/src/tryityourself/Tushit/WindowTape.jsx b/src/tryityourself/Tushit/WindowTape.jsx new file mode 100644 index 0000000..6f623dc --- /dev/null +++ b/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 ( +
+
+

{width} X {height}

+
+
+ ) +} + +export default WindowTape; diff --git a/src/tryityourself/Tushit/WindowTape.style.css b/src/tryityourself/Tushit/WindowTape.style.css new file mode 100644 index 0000000..d818612 --- /dev/null +++ b/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; + } \ No newline at end of file