Password Strength Meter in Jquery

Password Strength Meter
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.
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> 
    AttributeBelongs to Description
    charset<meta>, <script>Specifies the character encoding
    classGlobal AttributesSpecifies 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
    idGlobal AttributesSpecifies a unique id for an element
    langGlobal AttributesSpecifies 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.
    FunctionDescription
    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.

    4 Comments

    Was this article useful? Please Leave Your Feedback by writing what's in your mind, below.
    1. bro how i can add lazy load media.net ads

      ReplyDelete
    2. hello bro how can i add a download page like this https://www.nomigamer.com/p/blog-page_24.html

      ReplyDelete

    Post a comment

    Was this article useful? Please Leave Your Feedback by writing what's in your mind, below.

    Recent Comments

    {getWidget} $results={3} $label={comments} $type={list}