Password Strength Meter in Jquery

Greetings buddy today we are going to make Password Strength Meter.

UI ( User Interface ) is one of the best things that make your website attractive to your users there are different ways to customize your website UI. This time I am here with a password strength metre that has a beautiful user interface and I will share the source code of this password strength metre in this article today.

Demo:

This is the snapped preview of Password Strength Meter.

To view online realtime demo click the button below. Open Demo As you know the HTML code is basic for that so we should have some HTML code first. Below is the HTML code.

The HTML, CSS & Javascript codes that are provided below can have some encoding errors so I recommend you to used codes from project files only if there is an error with the working of code.

There are some external files used in the code provided below you can download them if you want:

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js

HTML code:

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"><link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css'><div class="container"><h2 class="heading-2">Password Strength Meter</h2><form class="form-inline"><input type="password" id="input-password" class="input-password" /><div class="meter-text" id="meter-text"><span>password strength : </span><span class="meter-status" id="meter-status"></span></div><div class="meter" id="meter"><div class="meter-bar" id="meter-bar"></div></div></form></div><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script> 

Attribute	Belongs to	Description
charset	<meta>, <script>	Specifies the character encoding
class	Global Attributes	Specifies one or more classnames for an element (refers to a class in a style sheet)
href	<a>, <area>, <base>, <link>	Specifies the URL of the page the link goes to
id	Global Attributes	Specifies a unique id for an element
lang	Global Attributes	Specifies the language of the element's content
rel	<a>, <area>, <link>	Specifies the relationship between the current document and the linked document
src	<audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video>	Specifies the URL of the media file
type	<a>, <button>, <embed>, <input>, <link>, <menu>, <object>, <script>, <source>, <style>	Specifies the type of element

I have included the jquery script or plugin in the above code because we are going to use jquery code instead of javascript code so you have to include it if you already have added in your website then remove this one.

In the code provided above, I have added some icons using font-awesome CSS library that's why I have included the font-awesome library if you will remove it then you will see squares instead of icons.

Autocomplete functionality of the above password field is enabled you can disable it by adding autocomplete='off' attribute in form element and autocomplete='false' in input element of which you want to disable autocomplete. Without CSS our this script (Password Strength Meter) will never look fine. So here we are, our HTML code is ready now we have to customize our HTML code and it can only be done using CSS.

So this is the CSS code which I have written and we will use this to customize Password Strength Meter you can copy it by clicking on the code and code will be automatically copied to clipboard.

CSS Code:

body {background: #F2F4F6;margin: 0;padding: 0;box-sizing: border-box;font-family: 'Roboto' , sans-serif;font-weight: 400;display: flex;height: 100vh;align-items: center;justify-content: center;font-size: 16px;
}.container .heading-2 {font-weight: 700;color: #0D3F67;font-size: 2rem;margin: 1rem 0;text-transform: capitalize;
}
.container .form-inline {display: flex;flex-direction: column;width: 100%;overflow: hidden;
}
.container .form-inline .input-password {border-radius: 3px;border: 1px solid rgba(17, 17, 17, 0.2);height: 20px;font-size: 1.1rem;padding: .7rem 1rem;outline: none;transition: border .4s ease-in-out;
}
.container .form-inline .meter-text {display: flex;width: 70%;justify-content: space-between;margin: 1rem 0 .1rem 0;color: rgba(17, 17, 17, 0.6);text-transform: capitalize;
}
.container .form-inline .meter-text .meter-status {text-transform: capitalize;
}
.container .form-inline .meter {display: block;width: 70%;height: 10px;border-radius: 3px;background: rgba(17, 17, 17, 0.1);overflow: hidden;
}
.container .form-inline .meter .meter-bar {display: block;width: 0;height: 100%;transition: width .4s ease-in-out , transform .4s ease-in-out;
}

I have included simple font in the above CSS code. You can change the font according to your requirement to upgrade the UI and make this password strength metre look beautiful. So we have written HTML code and customized it using CSS and now we will add some functionality in this project ( Password Strength Meter ) to make it work as we want it to be.

To make this project ( Password Strength Meter ) work properly for that we will use JavaScript or jquery in some cases which is a javascript library.

This is the javascript code for our project you can also copy it by simple clicking once and code will be copied automatically.

JavaScript Code:

function checkStrength(password){
  let meterBar = $("#meter").find("#meter-bar");
  let meterStatus = $("#meter-text").find("#meter-status");
  let strength = 0;
  if(password.length < 6){
     meterBar.css({
      "background":"#6B778D",
      "width":"10%"
    });
    meterStatus.css("color","#6B778D");
    meterStatus.text("too short") ;
  }
  if(password.length > 7) strength += 1;
  if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) strength += 1
  if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)) strength += 1
  if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1
  if(strength < 2){
    meterBar.css({
      "background":"#ff0000",
      "width":"25%"
    });
    meterStatus.css("color","#ff0000");
    meterStatus.text("weak");
  }else if(strength == 2){
    meterBar.css({
      "background":"#00BCD4",
      "width":"75%"
    });
    meterStatus.css("color","#00BCD4");
    meterStatus.text("good");
  }else{
    meterBar.css({
      "background":"#4CAF50",
      "width":"100%"
    });
    meterStatus.css("color","#4CAF50");
    meterStatus.text("strong");
  }
}

$("#input-password").on("keyup",function(){
 checkStrength($(this).val());
});

I have used some javascript/Jquery BuiltIn functions in the above code here is the list of them with description.

Function	Description
on()	Attaches event handlers to elements
match()	Used to match a regular expression against a string.

Rules to identify the password strength are defined using this jQuery snippet. You can define your own rules to identify the password strength if you want.

Summary :

So here we are, We have done and our project Password Strength Meter is ready now you can copy and combine all the codes provided above into a single HTML file and have fun.

If the project files are not downloaded or if you face any error while downloading, you can simply leave your comment I will try to resolve the issue as soon as possible.

Download Source Code:

Download the source code by going to the link provided below. Download

If you face any difficulty in downloading the project file leave your comment below I will resolve that issue as soon as possible.

That's it, I think you may have got your answer and I think this will help you a lot if it did leave your feedback in the comment section below I will be glad to hear from you.