project(form): completed (#12)

Author: acash404

.gitignore

@@ -29,3 +29,4 @@ npm-shrinkwrap.json
 
 # bun lockfiles
 bun.lockb
+bun.lock

src/App.jsx

@@ -1,13 +1,14 @@
 import Greeting from "./components/Basics/Greeting";
-import CounterEffect from "./components/Hooks/useEffectHook/Counter1";
+// import CounterEffect from "./components/Hooks/useEffectHook/Counter1";
 import Counter from "./components/Hooks/useStateHook/Counter";
+import Form from "./project/Form";
 import ThemeToggler from "./project/ThemeToggler";
 
 // TRY IT YOURSELF COMPONENTS
-import ModifiedCounter from "./tryityourself/tushit/ModifiedCounter";
+// import ModifiedCounter from "./tryityourself/tushit/ModifiedCounter";
 
 const App = () => {
-  return <ThemeToggler />;
+  return <Form/>;
 };
 
 export default App;

src/project/Form.jsx

@@ -0,0 +1,70 @@
+import React from "react";
+import { useState } from "react";
+
+const Form = () => {
+  //   const [name, setName] = useState("");
+  //   const [email, setEmail] = useState("");
+
+  const [formData, setFormData] = useState({
+    name: "",
+    email: "",
+  });
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [isDisabled, setIsDisabled] = useState(false);
+
+  const handleChange = (e) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value,
+    });
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    console.log(formData.name);
+    console.log(formData.email);
+    setIsLoading(true);
+    setIsDisabled(true);
+    setTimeout(() => {
+      setIsLoading(false);
+      setIsDisabled(false);
+    }, 2000);
+    clearForm();
+  };
+
+  const clearForm = () => {
+    setFormData({
+      name: "",
+      email: "",
+    });
+  };
+
+  return (
+    <div>
+      <form>
+        <input
+          type="text"
+          placeholder="name"
+          name="name"
+          value={formData.name}
+          onChange={handleChange}
+        ></input>
+        <br></br>
+        <input
+          type="text"
+          placeholder="email"
+          name="email"
+          value={formData.email}
+          onChange={handleChange}
+        ></input>
+        <br></br>
+        <button disabled={isDisabled} onClick={handleSubmit}>
+          {isLoading ? "Submitting" : "Submit"}
+        </button>
+      </form>
+    </div>
+  );
+};
+
+export default Form;