How to Check Password Strength in JavaScript

How to Check Password Strength in JavaScript

password strength checker javascript

In this article, you will learn how to create a password strength checker using JavaScript. Earlier I shared many more projects like Random Password Generator, Password Show Hide, etc. In this tutorial, you will learn how to create a javascript password strength checker.

This type of design will make your login and registration form more attractive and perfect. This type of password strength checker allows the user to input a strong and unique password.

This type of project is perfect for you if you want to add some conditions for inputting passwords in your login form.

Password Strength Checker JavaScript

In this case, the user will be able to input different types of characters to make his password even stronger. There is a progress bar to understand how strong this password is. Different colors have been added to this progress bar. These colors will indicate the quality of the password.

There are four types of steps in the bar. When you input general characters, red background color appears in 25% of the progress bar. When you input a variety of special characters into the password, the bar’s background color will increase by another 25%.

When different types of special characters, numbers, and capital letters are input into the password, then the progress bar will be hundred percent and its color will be green.

See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.

There is an icon that allows the user to see and hide the password. Hopefully, you understand this kind of strength of password check will make your login form more attractive. It was created using only HTML CSS and JavaScript.

How to Create Password Strength Checker

If you know basic HTML CSS JavaScript you can easily create a javascript password strength checker. Here I have shared a step-by-step tutorial. 

First I created a box at the top of the web page. That box contains the first input box. Then I provided an icon. That icon will help you see and hide your password. If you are a beginner then follow the step-by-step tutorial below.

Step 1: Basic structure of Strength Checker

I have created a box on the web page using the following code. Then I designed the webpage a bit using CSS and used the blue color of the background of the webpage.

<div class=”wrapper”>
  <div class=”container”>
 
  </div>
</div>
*,
*:before,
*:after{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body{
  height: 100vh;
  background: rgb(38, 125, 236);
}

I designed this box using the following codes. Box width: 400px, height will depend on the amount of content. I have also used white color in the background and used a shadow all around to enhance the beauty.

.wrapper{
  background-color: #ffffff;
  width: 400px;
  padding: 40px 0;
  position: absolute;
  transform: translate(-50%,-50%);
  left: 50%;
  top: 50%;
  border-radius: 3px;
  box-shadow: 0 20px 25px rgba(0,0,0,0.2);
}
.container{
  width: 300px;
  position: relative;
  margin: auto;
}
Basic structure of Strength Checker

Step 2: Place to input password

Now I have created a place to input the password. Here I have used the input function of simple HTML and type = “password”. 

As a result, the input passwords can be seen in dot form. Input box width: 100% and height: 50px. Also padding: 0 40px 0 20px has been used for size control.

<input type=”password” id=”password” oninput=”strengthChecker()”>
input{
  width: 100%;
  height: 50px;
  padding: 0 40px 0 20px;
  position: relative;
  background-color: #edf6f9;
  border: none;
  outline: none;
  border: 2px solid rgba(7, 38, 119, 0.68);
  border-radius: 5px;
}
Place to input password

Step 3: Password show hide icon

Now the icon has been added to the input box. This icon will help to see and hide the password.

<span id=”toggle” onclick=”toggle()”>
  <i class=”fas fa-eye”></i>
</span>
#toggle{
  position: absolute;
  top: 17px;
  right: 15px;
  color: #808080;
  cursor: pointer;
}
#toggle i{
  font-size: 20px;
}
Password show hide icon

Step 4: Progress bar for viewing password strength

Now I have created a Progressbar which will basically help you understand the quality of your password.

 <div id=”strength-bar”></div>
.strength{
  width: 25%;
  display: inline-block;
  position: relative;
  height: 100%;
  bottom: 5px;
}
#strength-bar{
  background-color: #dcdcdc;
  height: 10px;
  position: relative;
  margin-top: 15px;
  border-radius: 10px;
}
Progress bar for viewing password strength

Step 5: Activate Password Strength Checker with JavaScript

The design work above is almost done. Now is the time to implement this project with the help of JavaScript. If you have a basic idea about JavaScript, you can create this password strength checker. 

I have given the necessary explanation of the codes here. First I activated the progress bar. Then I will activate the icon.

//First the parameters of this project have been determined.
let parameters = {
  count : false,
  letters : false,
  numbers : false,
  special : false
}
//A constant of the id of the progressbar is set.
let strengthBar = document.getElementById(“strength-bar”);
function strengthChecker(){
//The value of the input box has been collected and stored in a constant called ‘password’.  
let password = document.getElementById(“password”).value;
//Now the values ​​of the parameters have been added.
  parameters.letters = (/[A-Za-z]+/.test(password))?true:false;
  parameters.numbers = (/[0-9]+/.test(password))?true:false;
  parameters.special = (/[!\”$%&/()=?@~`\\.\’;:+=^*_-]+/.test(password))?true:false;
  parameters.count = (password.length > 7)?true:false;
  let barLength = Object.values(parameters).filter(value=>value);
  console.log(Object.values(parameters), barLength);
  strengthBar.innerHTML = “”;
  for( let i in barLength){
      let span = document.createElement(“span”);
      span.classList.add(“strength”);
      strengthBar.appendChild(span);
  }
//Here 4 types of parameters have been used so 4 types of cases can be seen. A different background color is used for each step.
  let spanRef = document.getElementsByClassName(“strength”);
  for( let i = 0; i < spanRef.length; i++){
      switch(spanRef.length – 1){
          case 0 :
              spanRef[i].style.background = “#ff3e36”;
              break;
          case 1:
              spanRef[i].style.background = “#ff691f”;
              break;
          case 2:
              spanRef[i].style.background = “#ffda36”;
              break;
          case 3:
              spanRef[i].style.background = “#0be881”;
              break;
      }
  }
}

Password Strength Checker with JavaScript
Javascript password strength checker has been activated above. Now the password show and hide options have been activated.

function toggle(){
//First the constant of some id is determined.
  let password = document.getElementById(“password”);
  let eye = document.getElementById(“toggle”);
//When the icon is clicked, the passwords will be converted to text. This will change the color of the icon.
  if(password.getAttribute(“type”) == “password”){
      password.setAttribute(“type”,”text”);
      eye.style.color = “#062b61”;
  }
  else{
      password.setAttribute(“type”,”password”);
      eye.style.color = “#6b6868”;
  }
}
How to Check Password Strength in JavaScript

JavaScript Password Strength Checker

Those who are non-coders can directly copy the code of this project (Check Password Strength in JavaScript). Since I have included all the codes in the HTML code here. 

So you only need to create the HTML file. So first create an HTML file and copy the following codes and add them to your file.

See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.

Hopefully, you have been able to create this password strength checker jquery with the above tutorials and source codes. If there is any problem, you can let me know by commenting. 

I have already created many more types of projects using JavaScript. If you only want to download the source code, you can use the button below. Please let me know how you like this javascript password strength checker.