akash(random-background-color): all set. (#17)

Author: acash404

src/App.jsx

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

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,3 +1,4 @@
 @import "tailwindcss";
 @import "./components/Hooks/useRefHook/HandlingForm.style.css";
 @import "./tryityourself/Akash/FormDetails.style.css";
+@import "./tryityourself/Akash/RandomBackground.style.css";

src/tryityourself/Akash/FormDetails.jsx

@@ -92,7 +92,8 @@ const FormDetails = () => {
       <div className="background">
         <form className="form">
           <h1 className="text-3xl text-[#B3FF00] font-semibold tracking-[.125em] pb-5 text-center relative">
-            Register<span className="text-purple-500">!</span>
+            Reg<span className="text-purple-500">i</span>ster
+            <span className="text-purple-500">!</span>
           </h1>
           <label className="labell" onClick={handleGuideMeName}>
             Full Name :

src/tryityourself/Akash/RandomBackground.jsx

@@ -0,0 +1,23 @@
+import React, { useState, useEffect } from "react";
+
+const RandomBackground = () => {
+  const [randomSplash, setRandomSplash] = useState();
+
+  // FUNCTION FOR COLOR CHANGE (took help for the math.random() part)
+  const ChangeBackground = () => {
+    const randomColors = "#" + Math.random().toString(16).slice(2, 8);
+    setRandomSplash(randomColors);
+  };
+
+  // USE EFFECT TO CHANGE BACKGROUND AT INTERVALS (took help for implying setInterval inside useEffect )
+  useEffect(() => {
+    const interval = setInterval(ChangeBackground, 1500);
+  }, []);
+
+  return (
+    <div className="random-bg" style={{ backgroundColor: randomSplash }}>
+      <div className="text">Random Background Color</div>
+    </div>
+  );
+};
+export default RandomBackground;

src/tryityourself/Akash/RandomBackground.style.css

@@ -0,0 +1,6 @@
+.random-bg {
+  @apply h-screen flex justify-center items-center;
+}
+.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;
+}