subhajit(tiy-form): All mentioned functionality are included in the f…

src/App.jsx

@@ -8,8 +8,11 @@ import HandlingForm from "./components/Hooks/useRefHook/HandlingForm";
 import FormDetails from "./tryityourself/Akash/FormDetails";
 import RandomBackground from "./tryityourself/Akash/RandomBackground";
 
+import FormDetailsSubhajit from "./tryityourself/Subhajit/FormDetails"
+
 const App = () => {
-  return <RandomBackground />;
+  // return <RandomBackground />;
+  return <FormDetailsSubhajit/>;
 };
 
 export default App;

src/index.css

@@ -2,3 +2,4 @@
 @import "./components/Hooks/useRefHook/HandlingForm.style.css";
 @import "./tryityourself/Akash/FormDetails.style.css";
 @import "./tryityourself/Akash/RandomBackground.style.css";
+@import "./tryityourself/Subhajit/FormDetails.style.css";

src/tryityourself/Subhajit/FormDetails.jsx

@@ -0,0 +1,116 @@
+import React, { useRef, useState } from 'react'
+
+const FormDetails = () => {
+
+// useState for data management from the form
+const [formDetails,setFromDetails] = useState({
+    name: "",
+    email: "",
+    phone: "",
+    password: "",
+    confirmPassword: "",
+})
+
+//METHODE TO CLEAR THE FORM DETAILS
+const clearFrom = () => {
+    setFromDetails({
+    name: "",
+    email: "",
+    phone: "",
+    password: "",
+    confirmPassword: "",
+    })
+}
+
+// HANDELER FUNCTION
+const formHandeler = (e) => {
+    setFromDetails({
+        ...formDetails,
+        [e.target.name]: e.target.value,
+    })
+    // console.log(formDetails[e.target.name]);
+}
+
+
+// USEREF FOR REFERENCING ALL CHANGES 
+const userNameRef = useRef();
+const userEmailRef = useRef();
+const userPhoneRef = useRef();
+const userPasswordRef = useRef();
+const userConfirmPasswordRef = useRef();
+
+// GUIDE METHODES TO GUIDE TO EACH INPUT FIELD USING useRef
+
+const guideName = function(){
+    userNameRef.current.focus();
+    console.log(userNameRef.current);
+
+}
+const guideEmail = function(){
+    userEmailRef.current.focus();
+}
+const guidePhone = function(){
+    userPhoneRef.current.focus();
+}
+const guidePassword = function(){
+    userPasswordRef.current.focus();
+}
+const guideConfirmPassword = function(){
+    userConfirmPasswordRef.current.focus();
+}
+
+// USE STATES FOR DELAY IN SUBMIT
+
+const [isLoading,setIsLoading] = useState(false);
+const [isDisabled,setIsDisabled] = useState(false);
+
+// HANDEL SUBMIT METHODE TO HANDEL THE SUBMIT FUNCTIONALITY
+const handelSubmit = function(e){
+    e.preventDefault();
+    if(formDetails.password !== formDetails.confirmPassword){
+        alert("Confirm Password does not match with Password field");
+        guideConfirmPassword();
+    }
+    else{
+        setIsDisabled(true);
+        setIsLoading(true);
+        console.log(formDetails.name);
+        console.log(formDetails.email);
+        console.log(formDetails.phone);
+        console.log(formDetails.password);
+        console.log(formDetails.confirmPassword);
+        setTimeout(()=>{
+            setIsDisabled(true);
+            setIsLoading(false);
+            clearFrom();
+        },1500)
+    }
+}
+
+  return (
+    <>
+    <div className="bg">
+    <form className="frm">
+        <label htmlFor="" className='lbl' onClick={guideName}>User Name</label>
+        <input type="text" name="name" ref={userNameRef} className='fld' value={formDetails.name} onChange={formHandeler}/>
+
+        <label htmlFor="" className='lbl' onClick={guideEmail}>Email</label>
+        <input type="email"  name="email" ref={userEmailRef} className='fld' value={formDetails.email} onChange={formHandeler}/>
+
+        <label htmlFor="" className='lbl' onClick={guidePhone}>Phone</label>
+        <input type="number"  name="phone" ref={userPhoneRef} className='fld' value={formDetails.phone} onChange={formHandeler}/>
+
+        <label htmlFor="" className='lbl' onClick={guidePassword}>Password</label>
+        <input type="password"  name="password" ref={userPasswordRef} className='fld' value={formDetails.password} onChange={formHandeler}/>
+
+        <label htmlFor="" className='lbl' onClick={guideConfirmPassword}>Confirm Password</label>
+        <input type="password"  name="confirmPassword" ref={userConfirmPasswordRef} className='fld' value={formDetails.confirmPassword} onChange={formHandeler}/>
+
+        <button className='bt' disabled={isDisabled} onClick={handelSubmit}>{isLoading?"Loading...":"Submit"}</button>
+    </form>
+    </div>
+    </>
+  )
+}
+
+export default FormDetails

src/tryityourself/Subhajit/FormDetails.style.css

@@ -0,0 +1,16 @@
+
+.bg{
+    @apply w-full h-full min-h-screen flex flex-col justify-center items-center
+}
+.frm{
+    @apply w-90  h-[100%] bg-[#F5EFFF] flex flex-col justify-center items-center  sm:py-10 rounded-xl
+}
+.lbl{
+    @apply pt-5
+}
+.fld {
+    @apply  rounded-sm px-4 py-2 bg-[#CDC1FF] 
+}
+.bt{
+    @apply bg-[#CDC1FF] px-6 py-2 m-8 border rounded-md 
+}