Here is how I made a strong password checker using Javascript.
Tags: webdev, javascript, css, beginners
Published: 2023-06-19 12:58:22

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.

{% codesandbox yxgfq5 %}

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

{% youtube Iss2ASrpl9s %}

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 👇

```HTML
<!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. 
```CSS
* {
    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.

```HTML
<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>
```
```CSS
.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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/izdcvtsnyir2wmixyvsm.png)

#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 👇

```HTML
<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>
```
```CSS
 .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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vqniq3o9bqswlnvfmfjj.png)

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.

```JS
// 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.

```CSS
.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.

```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](https://www.youtube.com/c/modernweb) channel.