Creating a Password Strength Checker: Beginner JavaScript Project

A password strength checker helps ensure that users create strong, hard-to-guess passwords. In this tutorial, we'll build a simple password strength checker using JavaScript.

It will be a fun way to practice your JavaScript skills. ✌️

1) HTML Setup

First, we need an HTML structure. We'll have an input field for the password and a display area for strength feedback. And connect our JavaScript file:

<!DOCTYPE html>
<html>

<head>
  <title>Password Strength Checker</title>
</head>

<body>
  <input type="password" id="passwordInput" placeholder="Enter Password">
  <div id="strengthDisplay"></div>

  <script src="passwordChecker.js"></script>
</body>

</html>

2) JavaScript Basics

Create a file named passwordChecker.js. This file will contain our JavaScript code.

Checking Length

A basic check is the length of the password. A good minimum is 8 characters.

function checkPasswordStrength(password) {
    let strength = 0;
    if (password.length >= 8) {
        strength += 1;
    }
    return strength;
}

What we will do is follow this format add complexity to our checks, and check our score as it's added to our strength variable:

Adding Complexity

Let's improve our checker by looking for uppercase letters, numbers, and special characters. We will use regular expressions checks for this:

function checkPasswordStrength(password) {
    let strength = 0;
    if (password.length >= 8) {
        strength += 1;
    }
    // Uppercase check
    if (password.match(/[A-Z]/)) {
        strength += 1;
    }
    // Number check
    if (password.match(/[0-9]/)) {
        strength += 1;
    }
    // Special character check
    if (password.match(/[^A-Za-z0-9]/)) {
        strength += 1;
    }
    return strength;
}

Displaying Strength

We can now display the password strength to the user.

Add the following to our passwordChecker.js file:

document
  .getElementById("passwordInput")
  .addEventListener("input", function (e) {
    const strength = checkPasswordStrength(this.value);
    const strengthDisplay = document.getElementById("strengthDisplay");
    switch (strength) {
      case 1:
        strengthDisplay.innerHTML = "Weak";
        break;
      case 2:
        strengthDisplay.innerHTML = "Moderate";
        break;
      case 3:
      case 4:
        strengthDisplay.innerHTML = "Strong";
        break;
      default:
        strengthDisplay.innerHTML = "";
    }
  });

You now have a basic password strength checker. This can be improved with more complex rules and better user feedback.

Now, I like to add a splash of color to ensure things are obvious to the user (and a pattern you might recognise from other password checks online).

Let's add some basic styles:

Bonus: Dynamic styles

Since I don't plan on things getting too complicated, let's just embed our styles directly into our HTML:

<!DOCTYPE html>
<html>

<head>
  <title>Password Strength Checker</title>
  <style>
    #strengthDisplay {
      margin-top: 10px;
      font-size: 16px;
    }

    .weak {
      color: red;
    }

    .moderate {
      color: orange;
    }

    .strong {
      color: green;
    }
  </style>
</head>

<body>
  <input type="password" id="passwordInput" placeholder="Enter Password">
  <div id="strengthDisplay"></div>

  <script src="passwordChecker.js"></script>
</body>

</html>

Here, we have added some basic styles that we will use to add color to our password rating.

We will do this by extending our JS logic and applying the classes where appropriate when we are applying the innerHTML:


document
  .getElementById("passwordInput")
  .addEventListener("input", function (e) {
    const strength = checkPasswordStrength(this.value);
    const strengthDisplay = document.getElementById("strengthDisplay");
    // Reset classes
    strengthDisplay.className = ""; 

    switch (strength) {
      case 1:
        strengthDisplay.innerHTML = "Weak";
        // Add class
        strengthDisplay.classList.add("weak");
        break;
      case 2:
        strengthDisplay.innerHTML = "Moderate";
        // Add class
        strengthDisplay.classList.add("moderate");
        break;
      case 3:
      case 4:
        strengthDisplay.innerHTML = "Strong";
        // Add class
        strengthDisplay.classList.add("strong");
        break;
      default:
        strengthDisplay.innerHTML = "";
    }
  });

Here's the working version:

Make it your own! ✨

Following along might teach you a trick or two but you'll learn more by extending and making it your own.

Here are some ideas to extend this project to make it your own:

Advanced Strength Criteria

Integrate more complex password rules, such as disallowing consecutive characters or common patterns.
Use a dictionary to check for common words or passwords.

Real-Time Visual Feedback

Implement a visual strength meter (e.g., a progress bar) that changes color and length based on password strength.
Use animations to make the feedback more engaging.

User-Friendly Tips and Guidance

Display dynamic tips for improving password strength (e.g., "Add a number or symbol to make your password stronger").
Provide a list of do's and don'ts for creating a strong password.

Accessibility

Ensure the tool is accessible, supporting screen readers and keyboard navigation.

Responsive Design

Ensure the tool is fully responsive and works well on various devices and screen sizes.
Test and optimize performance on mobile devices.

Learn with Different Tools

Build it using JavaScript libraries/frameworks (like React or Vue.js) for better state management and UI rendering.
Learn some new CSS tools and apply styles like Tailwind or Bootstrap.

Testing and Documentation

- Write unit tests to ensure the reliability of the password strength logic. - Provide comprehensive documentation and usage examples for the tool.

By incorporating some of these features, the password strength checker can become a more robust and attractive project in a portfolio, demonstrating a wider range of web development skills and, more importantly, a way for you to learn much more beyond the basics.

If you do alter it, I'd love to see your work.

Drop a link in the comments. 🔗

Happy coding! ⚡️