How to make Password Strength Checker in JavaScript

byAnonymous -November 19, 2021

Hello friend, hope you are doing awesome, today in this blog I have shown How to make a Password Strength Checker using HTML CSS, and JavaScript, as you know there are lots of JavaScript projects that I have created like email validation, password, and confirm password checker. As like them, this project is also relevant.

In simple and easy language, Password Strenght Checker is the program that tests our password and shows how strong our password is. This type of program helps users to create theirs strong passwords, which really helps to prevent hacking.

Let's have a look at the given image of our program's Password Strength Checker. There are three input fields with some characters. As you can see the first field shows our entered password is weak because i have used only alphabet letters, the second field shows the entered password is medium because I have added some numbers with alphabet letters and the last input field shows that our password is strong because I have entered alphabet letter, number, and one special character.

Now you have to know, to create a strong password we need to combine alphabet letters (capital letters and small letters), some numbers (like 1,2,3....9), and some special characters(like @,! $,%,#,&,*).

I hope now you got the basic and theoretical meaning of the Password Strength Checker, rather than theory I would highly recommend you to watch the given video tutorial of this project because in the video you will get the opportunity to see the real example of how this program checks the password and all the HTML CSS and JavaScript code that I have used to create this Password Strength Checker.

Password Strength Checker | HTML CSS & JavaScript

I have provided all the HTML CSS and JavaScript source code that I used to create this Password Strength Checker below, before jumping into the source code, you need to know some important points of this program.

As you have seen on the given video tutorial of this Password strength checker. At first, we saw a blank password field with a grey border. When I entered the character, it's started to check and according to the character border, text, and eye icon color changed, that makes more beautiful, isn't it?. Also by clicking on the eye button we can see our character easily.

This UI design is made by HTML and CSS and to show password strength and to show or hide passwords, I have used JavaScript code.

You can make this Password Strength Checker by watching a video tutorial and following the codes or you can take all the HTML CSS and javascript code forms below:

You Might Like This:

Password Strength Checker [Source Code]

To get the following HTML CSS and JavaScript code for Password Strength Checker & Password show and hide while clicking on the eye icon. You need to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.

HTML CODE:

<!DOCTYPE html><!-- Coding by CodingLab | www.codinglabweb.com--><html lang="en" dir="ltr">  <head>    <meta charset="UTF-8">    <!--<title> Show Password Strength | CodingLab </title>-->    <link rel="stylesheet" href="style.css">    <!-- Fontawesome CDN Link -->    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"/>  </head><body>  <div class="container">    <div class="input-box">      <i class="fas fa-eye-slash show_hide"></i>      <input spellcheck="false" type="password" placeholder="Enter password">    </div>    <div class="indicator">      <div class="icon-text">        <i class="fas fa-exclamation-circle error_icon"></i>        <h6 class="text"></h6>      </div>    </div>  </div>   <script>  const input = document.querySelector("input"),         showHide = document.querySelector(".show_hide"),         indicator = document.querySelector(".indicator"),         iconText = document.querySelector(".icon-text"),         text = document.querySelector(".text");    // js code to show & hide password    showHide.addEventListener("click", ()=>{     if(input.type === "password"){       input.type = "text";       showHide.classList.replace("fa-eye-slash","fa-eye");     }else {       input.type = "password";       showHide.classList.replace("fa-eye","fa-eye-slash");     }   });    // js code to show password strength (with regex)    let alphabet = /[a-zA-Z]/, //letter a to z and A to Z       numbers = /[0-9]/, //numbers 0 to 9       scharacters = /[!,@,#,$,%,^,&,*,?,_,(,),-,+,=,~]/; //special characters    input.addEventListener("keyup", ()=>{     indicator.classList.add("active");      let val = input.value;     if(val.match(alphabet) || val.match(numbers) || val.match(scharacters)){       text.textContent = "Password is weak";       input.style.borderColor = "#FF6333";       showHide.style.color = "#FF6333";       iconText.style.color = "#FF6333";     }     if(val.match(alphabet) && val.match(numbers) && val.length >= 6){       text.textContent = "Password is medium";       input.style.borderColor = "#cc8500";       showHide.style.color = "#cc8500";       iconText.style.color = "#cc8500";     }     if(val.match(alphabet) && val.match(numbers) && val.match(scharacters) && val.length >= 8){       text.textContent = "Password is strong";       input.style.borderColor = "#22C32A";       showHide.style.color = "#22C32A";       iconText.style.color = "#22C32A";     }      if(val == ""){       indicator.classList.remove("active");       input.style.borderColor = "#A6A6A6";       showHide.style.color = "#A6A6A6";       iconText.style.color = "#A6A6A6";     }   });    </script> </body></html>

CSS CODE:

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap'); *{   margin: 0;   padding: 0;   box-sizing: border-box;   font-family: 'Poppins', sans-serif; } body{   height: 100vh;   display: flex;   align-items: center;   justify-content: center;   background: #7D2AE8; } .container{   position: relative;   max-width: 460px;   width: 100%;   background: #fff;   border-radius: 4px;   padding: 30px;   margin: 0 20px;   box-shadow: 0 5px 10px rgba(0,0,0,0.2); } .container .input-box{   position: relative; } .input-box .show_hide{   position: absolute;   right: 16px;   top: 50%;   transform: translateY(-50%);   color: #A6A6A6;   padding: 5px;   cursor: pointer; } .input-box input{   height: 60px;   width: 100%;   border: 2px solid #d3d3d3;   border-radius: 4px;   font-size: 18px;   font-weight: 500;   color: #333;   outline: none;   padding: 0 50px 0 16px; } .container .indicator{   display: none; } .container .indicator.active{   display: block;   margin-top: 14px; } .indicator .icon-text{   display: flex;   align-items: center; } .icon-text .error_icon{   margin-right: 8px; } .icon-text .text{   font-size: 14px;   font-weight: 500;   letter-spacing: 1px; }

Trending

Deface poc Wp Add Admin

Cara deface Wp ghost Theme

8 Rekomendasi Cloud Storage Gratis Terbaik Ditahun 2021

XML-RPC BRUTE FORCE V.2.9.16 Free Download

SCRIPT WEB PH1SING PUBG MIDASBUY SEASON 23 TERBARU - FREE DOWNLOAD

How to make Password Strength Checker in JavaScript

Password Strength Checker | HTML CSS & JavaScript

You Might Like This:

Password Strength Checker [Source Code]

Post a Comment

Contact Form