Building a Simple Login System Using HTML, CSS, Bootstrap, and JavaScript

Starting my journey as a front-end developer has been both challenging and rewarding. One of my first projects was creating a basic login system. While simple in concept, it allowed me to apply fundamental concepts of front-end development and learn how to store user data using browser local storage.

Here's how I approached this project:

Objective

The goal was to build a basic login system where:

1. Users can sign up by entering their credentials.

2. Credentials are saved locally in the browser using local storage.

3. Users can log in by verifying their saved credentials.

Tools and Technologies Used

HTML: To structure the web page.

CSS: For styling and layout customization.

Bootstrap: To make the design responsive and visually appealing.

JavaScript: For interactivity, validation, and local storage integration.

Features

Sign-Up Form: Captures the user's name, email, and password.

Login Form: Validates user credentials against the data stored in local storage.

Error Handling: Alerts users if their login fails or their email is not registered.

Responsive Design: Ensures a seamless experience across all devices.

How It Works

1. Sign-Up Process

The user fills out the registration form.

JavaScript validates the input to ensure all fields are filled correctly.

The data is stored securely in the browser's local storage as a JSON object.

1. Login Process

The user enters their email and password.

JavaScript checks if the provided credentials match the stored data in local storage.

If the credentials are correct, the user is redirected to a dashboard or shown a success message.

1. Error Handling

If the email doesn't exist, the user is prompted to sign up.

If the password is incorrect, an error message is displayed.

Code Overview

HTML (Structure)

<div>



<p>CSS (Styling with Bootstrap)</p>

<p>I used Bootstrap for a responsive layout, ensuring the system works well on all devices. Minor custom CSS was added to fine-tune padding and margins.</p>

<p>JavaScript (Functionality)<br>
</p>

<pre class="brush:php;toolbar:false">// Sign-Up Function
function signup() {
  const name = document.getElementById("name").value;
  const email = document.getElementById("email").value;
  const password = document.getElementById("password").value;

  if (name && email && password) {
    const user = { name, email, password };
    localStorage.setItem(email, JSON.stringify(user));
    alert("Sign up successful! Please login.");
    document.getElementById("signup-form").classList.add("d-none");
    document.getElementById("login-form").classList.remove("d-none");
  } else {
    alert("Please fill out all fields.");
  }
}

// Login Function
function login() {
  const email = document.getElementById("login-email").value;
  const password = document.getElementById("login-password").value;
  const storedUser = JSON.parse(localStorage.getItem(email));

  if (storedUser) {
    if (storedUser.password === password) {
      alert(`Welcome back, ${storedUser.name}!`);
    } else {
      alert("Incorrect password.");
    }
  } else {
    alert("Email not registered. Please sign up first.");
  }
}

Challenges and Learnings

1. Local Storage:
   Understanding how to save, retrieve, and parse data in local storage was a key takeaway.

2. Form Validation:
   I learned how to use JavaScript to validate user inputs and provide real-time feedback.

3. Responsive Design:
   Using Bootstrap helped me create a clean, responsive UI without spending too much time on styling.

Future Improvements

This is just the beginning. In the future, I plan to:

Add password encryption for better security.

Implement session storage for managing logged-in states.

Replace local storage with a backend database for scalability.

Add a "Forgot Password" feature for better usability.

Conclusion

This project was a great learning experience and a significant milestone in my journey as a front-end developer. By building this login system, I solidified my understanding of HTML, CSS, Bootstrap, and JavaScript. It's simple yet functional and serves as a strong foundation for more advanced projects in the future.

Feel free to try it out and share your feedback!

The above is the detailed content of Smart login system. For more information, please follow other related articles on the PHP Chinese website!