index.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Welcome to Chitkara</h1>
<a href="./[Link]">SignUp</a>
<br><br>
<a href="./[Link]">SignIn</a>
</body>
</html>
[Link]:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form id="formId">
<label for="email">Enter Email/Username:</label>
<input type="email" id="email" name="email" required>
<br><br>
<label for="password">Enter Password: </label>
<input type="password" id="password" name="password" required>
<br><br>
<label for="mobile">Enter Mobile number: </label>
<input type="number" name="mobile" id="mobile" required>
<br><br>
<label>Select Gender: </label>
<input type="radio" name="gender" id="male" value="Male">
<label for="male">Male</label>
<input type="radio" name="gender" id="female" value="Female">
<label for="female">Female</label>
<br><br>
<input type="submit" value="SignUp">
</form>
<script>
//getting the initial value from the localStorage
let allSignUpDataArray =
[Link]([Link]("signupData")) || [];
const formElement = [Link]("formId");
[Link]("submit", function (e) {
[Link]();
//collecting the form data
let formData = new FormData([Link]);
//checking username is already registered or not ?
let userAlreadyExist = false;
for (let i = 0; i < [Link]; i++) {
let user = allSignUpDataArray[i];
if ([Link] === [Link]("email")) {
userAlreadyExist = true;
}
if (userAlreadyExist) {
alert("User Email is already exist..Please try with another
Email");
} else {
//converting form data to the JavaScript object.
let obj = {};
[Link](function(v, k){
obj[k] = v;
});
//appending the new user details to the localStorage
[Link](obj);
let allSignUpDataArrayJson =
[Link](allSignUpDataArray);
[Link]("signupData",
allSignUpDataArrayJson);
[Link](allSignUpDataArray);
alert("User Registered Sucessfully !");
[Link]();
});
</script>
</body>
</html>
[Link]:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form id="formId">
<label for="email">Enter Username:</label>
<input type="email" name="email" id="email" required>
<br><br>
<label for="password">Enter Password:</label>
<input type="password" name="password" id="password" required>
<br><br>
<input type="submit" value="SignIn">
</form>
<script>
//function to check username or password against the localstorage
function validateUser(username, password) {
[Link](username);
[Link](password);
let flag=false;
let allSignUpDataArray =
[Link]([Link]("signupData")) || [];
for(let i=0;i<[Link];i++){
let user= allSignUpDataArray[i];
if([Link] === username && [Link] === password){
flag=true;
}
}
return flag;
}
const formElement = [Link]("formId");
[Link]("submit", function (e) {
[Link]();
let formData = new FormData([Link]);
//getting the user entered username and password;
let enteredUsername= [Link]("email");
let enteredPassword = [Link]("password");
let isValid= validateUser(enteredUsername, enteredPassword);
if(isValid){
[Link] =
"./[Link]?uname="+enteredUsername;
}else{
alert("Invalid Username or Password, please try again");
}
});
</script>
</body>
</html>
[Link]:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Welcome Page</h1>
<button>Get Profile</button>
<div id="profile"></div>
<script>
const urlParams = new URLSearchParams([Link]);
// Get the username from the query parameters
let username = [Link]("uname");
let h1Element= [Link]("h1");
[Link]="Welcome "+username;
let buttonElement= [Link]("button");
[Link]("click", function(){
let profileDiv= [Link]("profile");
let allSignUpDataArray= [Link]([Link]("signupData"))
|| [];
for(let i=0;i<[Link];i++){
let user= allSignUpDataArray[i];
if([Link] === username){
let p_nameElement= [Link]("p");
p_nameElement.innerText="Username is:"+[Link];
let p_genderElement= [Link]("p");
p_genderElement.innerText="Gender is:"+[Link];
[Link](p_nameElement,p_genderElement);
}
});
</script>
</body>
</html>