Modern Web

Posted on Jun 19, 2023

Here is how I made a strong password checker using Javascript.

#webdev #javascript #css #beginners

In this article we'll see how I made a simple password checker which checks whether the password is strong or not. You might have seen this type of checker or validation in most of modern websites. So let's see how I made it.

In the above preview, you can see what exactly we will make. On the page there is a password field and you can type your password simply there. But when you focus it, a validation checklist will popup which tells what your password should include. As soon as your start typing the checklist will check the condition whatever gets satisfied. A cherry on top, there is eye icon on right where you can click to see password. Below you can find a Video tutorial where I am making this project step by step.

Video Tutorial

If you are seeing it then consider subscribing the channel as well. Okay coming to this blog. Let's see how to make it.

How everything is working ?

So if you just want a quick explanation of how everything is working, here it is. I am using CSS :focus selector to show/hide the checklist box and under the hood I am using regex in Javascript to validate the password everytime, there is a keyup event triggers using regex's test() method. And about the eye icon, its basically toggling the password input type to text from password to text on click event.

Let's code then.

Step 1 - Write basic structure.

So let's start with the basic HTML structure. So create an index.html file along with style.css and app.js file. Then just add a basic HTML structure boiler code and link the CSS and JS file. Something like this 👇



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Strong Password Validation</title>

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

    <!-- Font Awesome CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <link rel="stylesheet" href="style.css">

</head>
<body>

    <script src="app.js"></script>

</body>
</html>

In the above code, I have Google Fonts - Poppins as well as FontAwesome CDN.



* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background: #d34970;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Poppins', sans-serif;
}

So once you have a basic structure done. Let's move on the next step.

Step 2 - Create the Password Input.

To create the password input, first let's create a div inside <body> to wrap the input of type=password as well as the eye icon and add class names to them so we can select style them in CSS files.



<body>

    <div class="password-input-box">

        <input type="password" placeholder="Password" class="password-input">
        <i class="fa-solid fa-eye show-password"></i>

    </div>

</body>



.password-input-box{
    position: relative;
    width: 300px;
    height: 40px;
}

.password-input{
    width: 100%;
    height: 100%;
    background: #fff;
    border: none;
    padding: 5px 15px;
    outline: none;
    border-radius: 5px;
    color: #d34970;
    padding-right: 45px;
}

.password-input::placeholder{
    color: #d34970;
}

.password-input:focus{
    box-shadow: 0 0 0 3px #d34970,
                0 0 0 6px #4fe222;
}

.show-password{
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #92203f;
}

Output

Step 3 - Create the validation checklist.

So since we have the password input now, we need the validation checklist box as well it order to show the user in frontend what conditions passwords should match. So inside the div with class name password-input-box make another div which will be the box of checklist and inside it use ul to create an unordered list to create the checkpoints. Something like this 👇



<div class="password-checklist">
    <h3 class="checklist-title">Password should be</h3>

    <ul class="checklist">
        <li class="list-item">At least 8 character long</li>
        <li class="list-item">At least 1 number</li>
        <li class="list-item">At least 1 lowercase letter</li>
        <li class="list-item">At least 1 uppercase letter</li>
        <li class="list-item">At least 1 special character</li>
    </ul>
</div>



 .password-checklist{
    position: absolute;
    top: calc(100% + 10px);
    width: 100%;
    padding: 20px 30px;
    background: #ef547f;
    border-radius: 5px;
}

.checklist-title{
    font-size: 15px;
    color: #922037;
    margin-bottom: 10px;
}

.checklist{
    list-style: none;
}

.list-item{
    padding-left: 30px;
    color: #fff;
    font-size: 14px;
}

.list-item::before{
    content: '\f00d';
    font-family: FontAwesome;
    display: inline-block;
    margin: 8px 0;
    margin-left: -30px;
    width: 20px;
    font-size: 12px;
}

.list-item.checked{
    opacity: 0.5;
}

.list-item.checked::before{
    content: '\f00c';
    color: #922037;
}

Output

So let's write Javascript to make everything functional.

Step 4 - Show/hide password.

The first thing we can do in JS is, toggling our password's input type from password to text to back to password. For that we first have to select the icon as well as the input in JS. Afterwards we can add click event to icon using addEventListener method and in callback, we can use if and else to check whats password type currently is and what we have to change.

You can understand this in detail from the code below.



// show password toggler

let showPasswordBtn = document.querySelector('.show-password');
let passwordInp = document.querySelector('.password-input');

showPasswordBtn.addEventListener('click', () => {

    // toggle icon 

    // font awesome class for eye icon
    showPasswordBtn.classList.toggle('fa-eye'); 

    // font awesome class for slashed eye icon
    showPasswordBtn.classList.toggle('fa-eye-slash');

    // ternary operator a shorthand for if and else to change the type of password input
    passwordInp.type = passwordInp.type === 'password' ? 'text' : 'password';

})

Step 5 - Adding the validation

So we are at the end on the main function of this project. So let's see how I did it.

So first we have to hide the checklist box and only show it when the password input get's focused and we can do that like this.



.password-checklist{
    ... 
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: .5s ease;
}

.password-input:focus ~ .password-checklist{
    opacity: 1;
    transform: translateY(0);
}

So since the box is only visible when the password input is in focus. Now write JS.



// string password validation

let passwordChecklist = document.querySelectorAll('.list-item');

let validationRegex = [
    { regex: /.{8,}/ }, // min 8 letters,
    { regex: /[0-9]/ }, // numbers from 0 - 9
    { regex: /[a-z]/ }, // letters from a - z (lowercase)
    { regex: /[A-Z]/}, // letters from A-Z (uppercase),
    { regex: /[^A-Za-z0-9]/} // special characters
]

passwordInp.addEventListener('keyup', () => {
    validationRegex.forEach((item, i) => {

        let isValid = item.regex.test(passwordInp.value);

        if(isValid) {
            passwordChecklist[i].classList.add('checked');
        } else{
            passwordChecklist[i].classList.remove('checked');
        }

    })
})

If you read above JS code, you will see validationRegex variable, that variable is an array of regex expressions for each conditions we want for the password. So inside the array, we have objects with key regex and the value of that key is the expression. One thing you have to keep in mind while making this array is that you make sure that the expression's index number is same as the <li> condition in HTML. Which is, if I have <li> for 8 characters long in HTML file the the first item in the array should be the regex expression for 8 characters, otherwise you will see in UI that wrong condition is getting checked.

Anyway coming again to the javascript, once we have the array of regex. I am just looping through it whenever there is a keyup event happening on passwordInp. And inside it we are selecting each regex expression and using test() method to validate the password value and storing the boolean value inside isValid variable.

Then at last I am using If and else to add or remove the checked class from <li> tag.

So after all the steps, you will have a fully working password validation checker at the end. I hope like this article and found this helpful. Thanks for reading this article. If you any suggestion or any doubts or anything to share feel free to leave it in comments. If you are interested in learning how to make some fully working websites you can checkout my YouTube channel.

Top comments (6)

lionel-rowe • Jun 20 '23

Not a criticism of your project, which is a really nice UI control, but if you want to actually test password strength, a list of rules like this is a bad way of doing it and often just incentivizes using weak passwords that fit the minimum requirements but are still needlessly difficult to remember. For example, P@ssw0rd is an extremely weak password that passes; whereas musician scold fold pet is a very strong password that fails (generated via correcthorsebatterystaple.net, inspired by Password Strength - XKCD).

If you want to get a good approximation of actual password strength, try ZXCVBN (online playground).

Modern Web • Jun 20 '23 • Edited

Yup! Agree with that the second password you gave in as example can be a strong password with easy to remember. The idea behind this project was to just demonstrate the basic use of regex to validate the string and whats good to show the regex validation other than validating the password. But still if the password follows the condition which we have in the code then I think that is strong yeah but not easy to remember.