Topic: DOM Manipulation, ES6, Vanilla JavaScript
Objective:
The goal of this week's training is to teach students how to create a basic Signup Login flow using HTML, CSS, and JavaScript. Students will learn to manipulate the DOM using Vanilla JavaScript and store user data in LocalStorage.
Project Overview:
Students will create three main pages for the Signup Login flow:
Signup Page
Login Page
Home Page
The data of the signed-up users will be stored in the browser's LocalStorage.
Detailed Instructions:
1. Signup Page
Objective: Create a form for users to sign up with validation.
HTML Structure:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Signup Page</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h2>Signup</h2> <form id="signupForm"> <label for="username">Username:</label> <input type="text" id="username" required> <label for="password">Password:</label> <input type="password" id="password" required> <label for="confirmPassword">Confirm Password:</label> <input type="password" id="confirmPassword" required> <button type="submit">Sign Up</button> </form> <p>Already have an account? <a href="login.html">Login here</a></p> <script src="signup.js"></script> </body> </html>CSS (styles.css):
body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; } form { background: white; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } label, input, button { display: block; margin: 10px 0; }JavaScript (signup.js):
document.getElementById('signupForm').addEventListener('submit', function(event) { event.preventDefault(); // Prevent form from submitting the default way const username = document.getElementById('username').value; const password = document.getElementById('password').value; const confirmPassword = document.getElementById('confirmPassword').value; // Validate fields are not empty if (!username || !password || !confirmPassword) { alert('All fields are required.'); return; } // Validate password length if (password.length < 8) { alert('Password must be at least 8 characters long.'); return; } // Validate passwords match if (password !== confirmPassword) { alert('Passwords do not match.'); return; } // Get users from LocalStorage or initialize an empty array if none exist const users = JSON.parse(localStorage.getItem('users')) || []; // Add new user to the array users.push({ username, password }); // Save updated users array back to LocalStorage localStorage.setItem('users', JSON.stringify(users)); alert('User signed up successfully!'); // Redirect to login page after 1 second setTimeout(() => { window.location.href = 'login.html'; }, 1000); });
2. Login Page
Objective: Create a form for users to log in.
HTML Structure:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Login Page</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h2>Login</h2> <form id="loginForm"> <label for="username">Username:</label> <input type="text" id="username" required> <label for="password">Password:</label> <input type="password" id="password" required> <button type="submit">Login</button> </form> <p>Don't have an account? <a href="signup.html">Sign up here</a></p> <script src="login.js"></script> </body> </html>JavaScript (login.js):
document.getElementById('loginForm').addEventListener('submit', function(event) { event.preventDefault(); // Prevent form from submitting the default way const username = document.getElementById('username').value; const password = document.getElementById('password').value; // Validate fields are not empty if (!username || !password) { alert('All fields are required.'); return; } // Get users from LocalStorage const users = JSON.parse(localStorage.getItem('users')) || []; // Find user with matching username and password const user = users.find(u => u.username === username && u.password === password); if (user) { // Save logged in user info to LocalStorage localStorage.setItem('loggedInUser', JSON.stringify(user)); alert('Login successful!'); // Redirect to home page after 1 second setTimeout(() => { window.location.href = 'home.html'; }, 1000); } else { alert('Invalid username or password'); } });
3. Home Page
Objective: Display a welcome message for the logged-in user.
HTML Structure:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Home Page</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h2>Welcome, <span id="username"></span></h2> <button id="logoutButton">Logout</button> <script src="home.js"></script> </body> </html>JavaScript (home.js):
// Get logged in user info from LocalStorage const loggedInUser = JSON.parse(localStorage.getItem('loggedInUser')); // If no user is logged in, redirect to login page if (!loggedInUser) { alert('No user is logged in'); setTimeout(() => { window.location.href = 'login.html'; }, 1000); } else { // Display username on home page document.getElementById('username').textContent = loggedInUser.username; } // Add event listener to logout button document.getElementById('logoutButton').addEventListener('click', function() { // Remove logged in user info from LocalStorage localStorage.removeItem('loggedInUser'); alert('Logged out successfully'); // Redirect to login page after 1 second setTimeout(() => { window.location.href = 'login.html'; }, 1000); });
Summary:
Signup Page: Users can create an account with validation for required fields, password length, and matching passwords. Data is saved in LocalStorage.
Login Page: Users can log in using their credentials. If successful, they are redirected to the Home Page.
Home Page: Displays a welcome message for the logged-in user and provides an option to log out.
Assignment:
Create a working Signup, Login, and Home page using the above instructions.
Ensure that data is correctly saved and retrieved from LocalStorage.
Implement validation for the Signup and Login forms.
Push the Project on Github, host it through Github Pages, record a video and share on Linkedin.
This document should serve as a comprehensive guide for Batch 11 training on creating a basic Signup Login flow using HTML, CSS, and JavaScript. The added comments and setTimeout function usage, along with validation, will help students understand the code better.