feat(InterviewBookingForm): Mostly done

src/Interivew Booking/InterviewBooking.jsx

@@ -1,3 +1,5 @@
+import InterviewForm from "./InterviewForm";
+
 /**
  * @param {null} null - requires onthing
  * @returns {JSX.Element} Page - HTML tags and JS functionality
@@ -5,8 +7,12 @@
  * @author Brock <darkicewolf50@gmail.com>
  * @todo add who helped developed the site and finalize css
  */
-const interviewBooking = () => {
-	return <p>Hello</p>;
+const InterviewBooking = () => {
+  return (
+    <>
+      <InterviewForm />
+    </>
+  );
 };
 
-export default interviewBooking;
+export default InterviewBooking;

src/Interivew Booking/InterviewForm.jsx

@@ -0,0 +1,34 @@
+import { useState } from "react";
+
+const InterviewForm = () => {
+  const [isButtonDisabled, setIsButtonDisabled] = useState(false);
+  const formsubmit = async (event) => {
+    event.preventDefault();
+    setIsButtonDisabled(true);
+    await new Promise((res) => setTimeout(res, 10000));
+    const formData = new FormData(event.target);
+    const formObject = Object.fromEntries(formData.entries());
+    await console.log("Form Data:", formObject);
+    setIsButtonDisabled(false);
+  };
+  return (
+    <>
+      <form onSubmit={formsubmit}>
+        <label for="name">Name (What to call you):</label>
+        <input type="text" id="fname" name="name" placeholder="Jaeinceins" />
+        <label for="email">UCalgary Email:</label>
+        <input
+          type="text"
+          id="email"
+          name="email"
+          placeholder="jaeinceins.bhaja@ucalgary.ca"
+        />
+        <button type="submit" disabled={isButtonDisabled}>
+          Submit
+        </button>
+      </form>
+    </>
+  );
+};
+
+export default InterviewForm;

src/InterviewBooking/interviewBooking.js

@@ -1,6 +0,0 @@
-const interviewBooking = () => {
-    return (<>
-    </>);
-}
-
-export default interviewBooking;

src/index.js

@@ -9,7 +9,7 @@ import OurSponsors from "./OurSponsors/OurSponsors";
 import JoinTheClub from "./Club Membership & Upcoming Events/JoinTheClub/JoinTheClub";
 import UpcomingEvents from "./Club Membership & Upcoming Events/UpcominEvents/UpcomingEvents";
 import Gallery from "./Gallery/Gallery";
-import interviewBooking from "./Interivew Booking/InterviewBooking";
+import InterviewBooking from "./Interivew Booking/InterviewBooking";
 import "./index.css";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
@@ -18,28 +18,13 @@ root.render(
     <BrowserRouter>
       <Routes>
         <Route element={<Header />}>
-					<Route
-						path="/"
-						element={<AboutUs />}></Route>
-					<Route
-						path="/Teams"
-						element={<SubTeams />}></Route>
-					<Route
-						path="/OurSponsors"
-						element={<OurSponsors />}></Route>
-					<Route
-						path="/JoinTheClub"
-						element={<JoinTheClub />}></Route>
-					<Route
-						path="/UpcomingEvents"
-						element={<UpcomingEvents />}></Route>
-					<Route
-						path="/Gallery"
-						element={<Gallery />}></Route>
-					<Route
-						path="/InterviewBooking"
-						element={<interviewBooking />}
-					/>
+          <Route path="/" element={<AboutUs />}></Route>
+          <Route path="/Teams" element={<SubTeams />}></Route>
+          <Route path="/OurSponsors" element={<OurSponsors />}></Route>
+          <Route path="/JoinTheClub" element={<JoinTheClub />}></Route>
+          <Route path="/UpcomingEvents" element={<UpcomingEvents />}></Route>
+          <Route path="/Gallery" element={<Gallery />}></Route>
+          <Route path="/InterviewBooking" element={<InterviewBooking />} />
         </Route>
       </Routes>
     </BrowserRouter>