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 (more…)

Continue ReadingHow to Check Password Strength in JavaScript