diff --git a/individual/fullstack/s54-s62/src/App.js b/individual/fullstack/s54-s62/src/App.js
index 6c8470c..bd37b2b 100644
--- a/individual/fullstack/s54-s62/src/App.js
+++ b/individual/fullstack/s54-s62/src/App.js
@@ -3,8 +3,10 @@ import { Container } from "react-bootstrap";
import "./App.css";
// Pages
-import Home from "./pages/Home";
-import Courses from "./pages/Courses";
+// import Home from "./pages/Home";
+// import Courses from "./pages/Courses";
+import Register from "./pages/Register";
+import Login from "./pages/Login";
function App() {
return (
@@ -14,8 +16,8 @@ function App() {
<>
-
-
+ {/* */}
+
>
);
diff --git a/individual/fullstack/s54-s62/src/components/CourseCard.js b/individual/fullstack/s54-s62/src/components/CourseCard.js
index e7a1ca3..9851037 100644
--- a/individual/fullstack/s54-s62/src/components/CourseCard.js
+++ b/individual/fullstack/s54-s62/src/components/CourseCard.js
@@ -13,10 +13,10 @@ export default function CourseCard({ courseProp }) {
* const [ getter, setterFunction ] = useState(initialGetterValue)
*/
- const [ count, setCount ] = useState(30);
+ const [ count, setCount ] = useState(0);
const enroll = () => {
- if (count > 0) {
- setCount(count - 1);
+ if (count < 30) {
+ setCount(count + 1);
} else {
alert('No More Seats');
}
diff --git a/individual/fullstack/s54-s62/src/pages/Login.js b/individual/fullstack/s54-s62/src/pages/Login.js
new file mode 100644
index 0000000..0e9ee13
--- /dev/null
+++ b/individual/fullstack/s54-s62/src/pages/Login.js
@@ -0,0 +1,97 @@
+import React, { useState } from "react";
+import { Form, Button } from "react-bootstrap";
+
+const Login = () => {
+ const [email, setEmail] = useState("");
+ const [password, setPassword] = useState("");
+ const [isValid, setIsValid] = useState(false);
+
+ const checkFormValidity = () => {
+ // Simple validation for demonstration purposes
+ const isValid = email !== "" && password !== "";
+ setIsValid(isValid);
+ };
+
+ const handleInputChange = (e) => {
+ const { name, value } = e.target;
+ // Update state based on the input field name
+ switch (name) {
+ case "email":
+ setEmail(value);
+ break;
+ case "password":
+ setPassword(value);
+ break;
+ default:
+ break;
+ }
+ };
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+
+ try {
+ const response = await fetch("http://localhost:4000/users/login", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({
+ email,
+ password,
+ }),
+ });
+
+ if (response.ok) {
+ alert("Thank you for logging in");
+ console.log("Login success")
+ // Handle successful login, e.g., redirect to another page
+ } else {
+ alert("Unsucessful login");
+ // Handle invalid credentials, e.g., show an error message
+ }
+ } catch (error) {
+ console.error("Error during login:", error);
+ // Handle other errors, e.g., network issues
+ }
+ };
+
+ return (
+
+ Email Address:
+ {
+ handleInputChange(e);
+ checkFormValidity();
+ }}
+ />
+
+
+ Password:
+ {
+ handleInputChange(e);
+ checkFormValidity();
+ }}
+ />
+
+
+
+ );
+};
+
+export default Login;
diff --git a/individual/fullstack/s54-s62/src/pages/Register.js b/individual/fullstack/s54-s62/src/pages/Register.js
new file mode 100644
index 0000000..c5d085c
--- /dev/null
+++ b/individual/fullstack/s54-s62/src/pages/Register.js
@@ -0,0 +1,151 @@
+import { useState, useEffect } from 'react';
+import { Form, Button } from 'react-bootstrap';
+
+export default function Register() {
+
+ // State hooks to store the values of the input fields
+ const [ firstName, setFirstName ] = useState("");
+ const [ lastName, setLastName ] = useState("");
+ const [ email, setEmail ] = useState("");
+ const [ mobileNo, setMobileNo ] = useState("");
+ const [ password, setPassword] = useState("");
+ const [ confirmPassword, setConfirmPassword ] = useState("");
+ // State to determine whether the submit button is enabled or not
+ const [ isActive, setIsActive ] = useState(false);
+
+ console.log(firstName);
+ console.log(lastName);
+ console.log(email);
+ console.log(mobileNo);
+ console.log(password);
+ console.log(confirmPassword);
+
+
+ function registerUser(e) {
+
+ e.preventDefault();
+
+ fetch("http://localhost:4000/users/register", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json"
+ },
+ body: JSON.stringify({
+ firstName: firstName,
+ lastName: lastName,
+ email: email,
+ mobileNo: mobileNo,
+ password: password
+ })
+ })
+ .then(res => res.json())
+ .then(data => {
+ console.log(data)
+
+ if (data) {
+ setFirstName("");
+ setLastName("");
+ setEmail("");
+ setMobileNo("");
+ setPassword("");
+ setConfirmPassword("");
+
+ alert("Thank you for registering!")
+
+ } else {
+
+ alert("Please try again later.")
+ }
+ })
+ }
+
+
+ useEffect(() => {
+ if((firstName !== "" && lastName !== "" && email !== "" && mobileNo !== "" && password !== "" && confirmPassword !== "") && (password === confirmPassword) && (mobileNo.length === 11)) {
+
+ setIsActive(true)
+ } else {
+ setIsActive(false)
+ }
+ // dependencies
+ }, [firstName, lastName, email, mobileNo, password, confirmPassword])
+
+ return (
+
+
+ First Name:
+ {setFirstName(e.target.value)}}
+ />
+
+
+ Last Name:
+ {setLastName(e.target.value)}}
+ />
+
+
+ Email:
+ {setEmail(e.target.value)}}
+ />
+
+
+ Mobile No:
+ {setMobileNo(e.target.value)}}
+ />
+
+
+ Password:
+ {setPassword(e.target.value)}}
+ />
+
+
+ Confirm Password:
+ {setConfirmPassword(e.target.value)}}
+ />
+
+
+ {/*conditionally renders the submit button based on the isActive state*/}
+ {
+ isActive
+ ?
+
+ :
+
+ }
+
+
+
+ )
+
+}
\ No newline at end of file