From 5d03156de433633406efef24b4d7c340e612170e Mon Sep 17 00:00:00 2001
From: acash404 <xeero999@gmail.com>
Date: Mon, 21 Apr 2025 16:20:42 +0000
Subject: [PATCH 1/2] akash(random-background-color): all set.

---
 src/App.jsx                                   |  6 ++--
 src/components/Hooks/useStateHook/Counter.jsx | 31 +++++++++----------
 src/index.css                                 |  1 +
 src/tryityourself/Akash/FormDetails.jsx       |  3 +-
 src/tryityourself/Akash/RandomBg.jsx          | 23 ++++++++++++++
 src/tryityourself/Akash/RandomBg.style.css    |  6 ++++
 6 files changed, 50 insertions(+), 20 deletions(-)
 create mode 100644 src/tryityourself/Akash/RandomBg.jsx
 create mode 100644 src/tryityourself/Akash/RandomBg.style.css

diff --git a/src/App.jsx b/src/App.jsx
index ecb4117..3b0beaa 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,16 +1,16 @@
 // 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 RandomBg from "./tryityourself/Akash/RandomBg";
 
 const App = () => {
-  return <FormDetails />;
+  return <RandomBg />;
 };
 
-export default App;
\ No newline at end of file
+export default App;
diff --git a/src/components/Hooks/useStateHook/Counter.jsx b/src/components/Hooks/useStateHook/Counter.jsx
index d8f8079..13f5ac2 100644
--- a/src/components/Hooks/useStateHook/Counter.jsx
+++ b/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;
\ No newline at end of file
+export default Counter;
diff --git a/src/index.css b/src/index.css
index a264fd3..85d8e13 100644
--- a/src/index.css
+++ b/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/RandomBg.style.css";
diff --git a/src/tryityourself/Akash/FormDetails.jsx b/src/tryityourself/Akash/FormDetails.jsx
index c148a51..e6e057d 100644
--- a/src/tryityourself/Akash/FormDetails.jsx
+++ b/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 :
diff --git a/src/tryityourself/Akash/RandomBg.jsx b/src/tryityourself/Akash/RandomBg.jsx
new file mode 100644
index 0000000..54f4cde
--- /dev/null
+++ b/src/tryityourself/Akash/RandomBg.jsx
@@ -0,0 +1,23 @@
+import React, { useState, useEffect } from "react";
+
+const RandomBg = () => {
+  const [rbg, setRbg] = useState();
+
+  // FUNCTION FOR COLOR CHANGE (took help for the math.random() part)
+  const ChangeBg = () => {
+    const randomColors = "#" + Math.random().toString(16).slice(2, 8);
+    setRbg(randomColors);
+  };
+
+  // USE EFFECT TO CHANGE BACKGROUND AT INTERVALS (took help for implying setInterval inside useEffect )
+  useEffect(() => {
+    const interval = setInterval(ChangeBg, 1500);
+  }, []);
+
+  return (
+    <div className="random-bg" style={{ backgroundColor: rbg }}>
+      <div className="text">Random Background Color</div>
+    </div>
+  );
+};
+export default RandomBg;
diff --git a/src/tryityourself/Akash/RandomBg.style.css b/src/tryityourself/Akash/RandomBg.style.css
new file mode 100644
index 0000000..b9d8ccb
--- /dev/null
+++ b/src/tryityourself/Akash/RandomBg.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;
+}

From c67b4144260b365f4aed7bb29077c89286c27e75 Mon Sep 17 00:00:00 2001
From: acash404 <xeero999@gmail.com>
Date: Mon, 21 Apr 2025 17:42:09 +0000
Subject: [PATCH 2/2] akash(random-background-color): Files and variables name
 updated.

---
 src/App.jsx                                        |  5 ++---
 src/index.css                                      |  2 +-
 .../Akash/{RandomBg.jsx => RandomBackground.jsx}   | 14 +++++++-------
 ...ndomBg.style.css => RandomBackground.style.css} |  0
 4 files changed, 10 insertions(+), 11 deletions(-)
 rename src/tryityourself/Akash/{RandomBg.jsx => RandomBackground.jsx} (55%)
 rename src/tryityourself/Akash/{RandomBg.style.css => RandomBackground.style.css} (100%)

diff --git a/src/App.jsx b/src/App.jsx
index 3b0beaa..c85699e 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -4,13 +4,12 @@ import Counter from "./components/Hooks/useStateHook/Counter";
 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 RandomBg from "./tryityourself/Akash/RandomBg";
+import RandomBackground from "./tryityourself/Akash/RandomBackground";
 
 const App = () => {
-  return <RandomBg />;
+  return <RandomBackground />;
 };
 
 export default App;
diff --git a/src/index.css b/src/index.css
index 85d8e13..bd01d27 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,4 +1,4 @@
 @import "tailwindcss";
 @import "./components/Hooks/useRefHook/HandlingForm.style.css";
 @import "./tryityourself/Akash/FormDetails.style.css";
-@import "./tryityourself/Akash/RandomBg.style.css";
+@import "./tryityourself/Akash/RandomBackground.style.css";
diff --git a/src/tryityourself/Akash/RandomBg.jsx b/src/tryityourself/Akash/RandomBackground.jsx
similarity index 55%
rename from src/tryityourself/Akash/RandomBg.jsx
rename to src/tryityourself/Akash/RandomBackground.jsx
index 54f4cde..7f5e64d 100644
--- a/src/tryityourself/Akash/RandomBg.jsx
+++ b/src/tryityourself/Akash/RandomBackground.jsx
@@ -1,23 +1,23 @@
 import React, { useState, useEffect } from "react";
 
-const RandomBg = () => {
-  const [rbg, setRbg] = useState();
+const RandomBackground = () => {
+  const [randomSplash, setRandomSplash] = useState();
 
   // FUNCTION FOR COLOR CHANGE (took help for the math.random() part)
-  const ChangeBg = () => {
+  const ChangeBackground = () => {
     const randomColors = "#" + Math.random().toString(16).slice(2, 8);
-    setRbg(randomColors);
+    setRandomSplash(randomColors);
   };
 
   // USE EFFECT TO CHANGE BACKGROUND AT INTERVALS (took help for implying setInterval inside useEffect )
   useEffect(() => {
-    const interval = setInterval(ChangeBg, 1500);
+    const interval = setInterval(ChangeBackground, 1500);
   }, []);
 
   return (
-    <div className="random-bg" style={{ backgroundColor: rbg }}>
+    <div className="random-bg" style={{ backgroundColor: randomSplash }}>
       <div className="text">Random Background Color</div>
     </div>
   );
 };
-export default RandomBg;
+export default RandomBackground;
diff --git a/src/tryityourself/Akash/RandomBg.style.css b/src/tryityourself/Akash/RandomBackground.style.css
similarity index 100%
rename from src/tryityourself/Akash/RandomBg.style.css
rename to src/tryityourself/Akash/RandomBackground.style.css