Create Signup, Login Page - Vanilla JavaScript
As a former 3D Animator with more than 12 years of experience, I have always been fascinated by the intersection of technology and creativity. That's why I recently shifted my career towards MERN stack development and software engineering, where I have been serving since 2021.
With my background in 3D animation, I bring a unique perspective to software development, combining creativity and technical expertise to build innovative and visually engaging applications. I have a passion for learning and staying up-to-date with the latest technologies and best practices, and I enjoy collaborating with cross-functional teams to solve complex problems and create seamless user experiences.
In my current role as a MERN stack developer, I have been responsible for developing and implementing web applications using MongoDB, Express, React, and Node.js. I have also gained experience in Agile development methodologies, version control with Git, and cloud-based deployment using platforms like Heroku and AWS.
I am committed to delivering high-quality work that meets the needs of both clients and end-users, and I am always seeking new challenges and opportunities to grow both personally and professionally.
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.