Password strength bar

In this article, we will learn how to create a "Password strength bar" with the help of HTML and CSS and JavaScript and JQuery. At the beginning of this article, we will learn some basic meaning of the Password strength bar. After that, we will learn some examples from this article.

What do you mean by the Password strength bar?

Password strength bar is used to check the strength of the password field. In this field, rather than displaying original characters, either asterisk (*) or dots (.) are shown when we enter the password. Password strength can be measured by various factors such as weak, strong, good, etc.

Let us explain this concept with the help of examples.

Example 1:

<! DOCTYPE html>
<html>
<head>
<title>
Password strength bar
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}
body {
  background: #191828;
  color: #efedef;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.6em;
  margin: 0;
  padding: 100px;
  }
h4 {
  font-weight: bold;
  margin-bottom: 2.5rem;
 color: #3494e6;
  align: center;
}
.form-container {
  display: block;
  width: 500px;
  margin: 60px auto;
  text-align: left;
}
lable {
  display: block;
  position: relative;
  text-transform: uppercase;
  color: #aaa;
}
input[type='password'] {
  width: 100%;
  box-sizing: border-box;
  height: 55px;
  display: inline-block;
  border: 3px solid #2F96EF;
  border-radius: 5px;
  padding: 0 15px;
  margin: 10px 0;
  transition: .2s;
}
input[type='password']:focus {
  outline: none;
   -moz-outline: none;
   -webkit-outline: none;
}
lable:before {
  content: "\f070";
  color: #aaa;
  font-size: 22px;
  font-family: FontAwesome;
  position: absolute;
  right: 25px;
  top: 44px;
}
.progress-bar_wrap {
  width: 300px;
  height: 5px;
  background: #F6F6FA;
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  border-radius: 5px;
}
.form-1 .progress-bar_item {
  display: inline-block;
  height: 100%;
  width: 33.33%;
 float: left;
  visibility: hidden;
  transition: background-color .2s, visisility .1s;
}
.form-1 .active {
  visibility: visible;
}
.progress-bar_item-1 {
  }
.progress-bar_item-2 {
}
.progress-bar_item-3 {
}
.progress-bar_text {
  display: inline-block;
  color: #aaa;
  margin-left: 5px;
  transition: .2s;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script>
<script>
$( document ).ready(function() {
  const changeText = function (el, text, color) {
    el.text(text).css('color', color);
  };
  $('.input-1').keyup(function(){
    let len = this.value.length;
    const pbText = $('.form-1 .progress-bar_text');
if (len === 0) {
      $('.form-1 .progress-bar_item').each(function() {
        $(this).removeClass('active')
      });
      $('.form-1 .active').css('background-color', 'transparent');
      changeText(pbText, 'Password is blank');
    } else if (len > 0 && len <= 4) {
      $('.form-1 .progress-bar_item-1').addClass('active');
      $('.form-1 .progress-bar_item-2').removeClass('active');
      $('.form-1 .progress-bar_item-3').removeClass('active');
      $('.form-1 .active').css('background-color', '#FF4B47');
      changeText(pbText, 'Too weak');
    } else if (len > 4 && len <= 8) {
      $('.form-1 .progress-bar_item-2').addClass('active');
      $('.form-1 .progress-bar_item-3').removeClass('active');
      $('.form-1 .active').css('background-color', '#F9AE35');
      changeText(pbText, 'Could be stronger');
    } else {
      $('.form-1 .progress-bar_item').each(function() {
        $(this).addClass('active');
      });
      $('.form-1 .active').css('background-color', '#2DAF7D');
      changeText(pbText, 'Strong password');
    }
  });
  });
  </script>
<body>
<div class="form-container">
 <h4> Example 1 </h4>
  <form class="form-1" action="">
  <lable> Enter password
      <input class="input-1" type="password" placeholder="&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;">
      </lable>
    <div class="progress-bar_wrap">
      <div class="progress-bar_item progress-bar_item-1"></div>
      <div class="progress-bar_item progress-bar_item-2"></div>
      <div class="progress-bar_item progress-bar_item-3"></div>
    </div>
    <span class="progress-bar_text">Password is blank</span>
  </form>
</div>
</body>
</html>

Explanation: In the above example, we have created a progress bar to measure the strength of the password field i.e. it can be a strong, weak or good.

Output:

Below is the output of this example.

Example 2:

<! DOCTYPE html>
<html>
<head>
<title>
Password strength bar
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}
.form-container {
  display: block;
  width: 500px;
  margin: 60px auto;
  text-align: left;
}
lable {
  display: block;
  position: relative;
  text-transform: uppercase;
  color: #aaa;
}
input[type='password'] {
  width: 100%;
  box-sizing: border-box;
  height: 55px;
  display: inline-block;
  border: 3px solid #2F96EF;
  border-radius: 5px;
  padding: 0 15px;
  margin: 10px 0;
  transition: .2s;
}
input[type='password']:focus {
  outline: none;
   -moz-outline: none;
   -webkit-outline: none;
}
lable:before {
  content: "\f070";
  color: #aaa;
  font-size: 22px;
  font-family: FontAwesome;
  position: absolute;
  right: 25px;
  top: 44px;
}
.progress-bar_wrap {
  width: 300px;
  height: 5px;
  background: #F6F6FA;
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  border-radius: 5px;
}
.form-1 .progress-bar_item {
  display: inline-block;
  height: 100%;
  width: 33.33%;
  float: left;
  visibility: hidden;
  transition: background-color .2s, visisility .1s;
}
.form-1 .active {
  visibility: visible;
}
.progress-bar_item-1 {
  }
.progress-bar_item-2 {
}
.progress-bar_item-3 {
}
.progress-bar_text {
  display: inline-block;
  color: #aaa;
  margin-left: 5px;
  transition: .2s;
}
body {
  background: #191828;
  color: #efedef;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.6em;
  margin: 0;
  padding: 100px;
  }
h4 {
  font-weight: bold;
  margin-bottom: 2.5rem;
 color: #3494e6;
  align: center;
}
.form-2 .progress-bar_item {
  display: inline-block;
  height: 100%;
  width: 32.5%;
  margin-right: .8%;
  border-radius: 5px;
  float: left;
  transition: background-color .2s, visisility .1s;
}
.form-2 .progress-bar_item-1.active {
  background-color: #FF4B47;
}
.form-2 .progress-bar_item-2.active {
  background-color: #F9AE35;
}
.form-2 .progress-bar_item-3.active {
  background-color: #2DAF7D;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script>
<script>
$( document ).ready(function() {
  const changeText = function (el, text, color) {
    el.text(text).css('color', color);
  });
  $('.input-2').keyup(function(){
    let len = this.value.length;
    const pbText = $('.form-2 .progress-bar_text');
    if (len === 0) {
      $('.form-2 .progress-bar_item').each(function() {
        $(this).removeClass('active')
      });
      changeText(pbText, 'Password is blank');
    } else if (len > 0 && len <= 4) {
      $('.form-2 .progress-bar_item-1').addClass('active');
      $('.form-2 .progress-bar_item-2').removeClass('active');
      $('.form-2 .progress-bar_item-3').removeClass('active');
      changeText(pbText, 'Too weak');
    } else if (len > 4 && len <= 8) {
      $('.form-2 .progress-bar_item-2').addClass('active');
      $('.form-2 .progress-bar_item-3').removeClass('active');
      changeText(pbText, 'Could be stronger');
    } else {
      $('.form-2 .progress-bar_item').each(function() {
        $(this).addClass('active');
      });
      changeText(pbText, 'Strong password');
    }
  });
  });
  </script>
<body>
<div class="form-container">
 <h4> Example 2 </h4>
  <form class="form-2" action="">
    <lable>Enter password
      <input class="input-2" type="password" placeholder="&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;">
      </lable>
    <div class="progress-bar_wrap">
      <div class="progress-bar_item progress-bar_item-1"></div>
      <div class="progress-bar_item progress-bar_item-2"></div>
      <div class="progress-bar_item progress-bar_item-3"></div>
    </div>
    <span class="progress-bar_text">Password is blank</span>
  </form>
</div>
</body>
</html>

Explanation: In the above example, we have created a designed progress bar to measure the strength of the password field i.e. it can be a strong, weak or good.

Output:

Below is the output of this example.

Example 3:

<! DOCTYPE html>
<html>
<head>
<title>
Password strength bar
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<style>
@import url(https://fonts.googleapis.com/css?family=Signika:400,700|Courgette);
* {
  box-sizing: border-box;
}
body {
    padding: 2.5em 2em 0em;
    background: #f5f7f9;
    font-size: 1.5em;
    color: #346;
    font-family: Signika, -apple-system, sans-serif;
}
section {
  margin: 0em auto 0;
  width: 100%;
  max-width: 800px;
}
span, p {
color:#3494e6;
}
input {
    display: block;
    margin: .5em auto 0em;
    padding: 0.5em 1em 0.5em 0.7em;
    width: 100%;
    border: none;
    background: rgba(0,0,0,0.05);
    color: rgba(0,0,0,0.8);
    font-size: 2em;
    line-height: 0;
    transition: all .5s linear;
}
input:hover, input:focus {
  outline: 0;
  transition: all .5s linear;
  box-shadow: inset 0px 0px 10px #ccc;
}
h4 {
  font-weight: bold;
  margin-bottom: 2.5rem;
 color: #3494e6;
  align: center;
}
meter {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
        margin: 0 auto 1em;
  width: 100%;
  height: .5em;
  background: none;
  background-color: rgba(0,0,0,0.1);
}
meter::-webkit-meter-bar {
  background: none;
  background-color: rgba(0,0,0,0.1);
}
meter[value="1"]::-webkit-meter-optimum-value { background: red; }
meter[value="2"]::-webkit-meter-optimum-value { background: yellow; }
meter[value="3"]::-webkit-meter-optimum-value { background: orange; }
meter[value="4"]::-webkit-meter-optimum-value { background: green; }
meter[value="1"]::-moz-meter-bar { background: red; }
meter[value="2"]::-moz-meter-bar { background: yellow; }
meter[value="3"]::-moz-meter-bar { background: orange; }
meter[value="4"]::-moz-meter-bar { background: green; }
.feedback {
  color: #9ab;
  font-size: 90%;
  padding: 0 .25em;
  font-family: Courgette, cursive;
  margin-top: 1em;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.2.0/zxcvbn.js"> </script>
<script>
window.onload=function(){
var strength = {
    0: "Worst ?",
    1: "Bad ?",
    2: "Weak ?",
    3: "Good ?",
    4: "Strong ?"
}
var password = document.getElementById('password');
var meter = document.getElementById('password-strength-meter');
var text = document.getElementById('password-strength-text');
password.addEventListener('input', function()
{
    var val = password.value;
    var result = zxcvbn(val);
    meter.value = result.score;
    if(val !== "") {
        text.innerHTML = "Strength: " + "<strong>" + strength[result.score] + "</strong>" + "<span class='feedback'>" + result.feedback.warning + " " + result.feedback.suggestions + "</span";
    }
    else {
        text.innerHTML = "";
    }
});
}
</script>
<body>
<section>
<h4> Example 3 </h4>
    <label for="password"> Enter password </label>
    <input type="password" name="password" id="password">
  <meter max="4" id="password-strength-meter"> </meter>
    <p id="password-strength-text"> </p>
</section>
</body>
</html>

Explanation: In the above example, we have measured the strength of the password field, i.e., it can be strong, weak, or good. When you type the password, it gives the strength as well as some suggestions regarding the password.

Output:

Below is the output of this example.