Facebook Instagram Youtube
  • Home
  • Blog
  • HTML & CSS
    • Login Forms
    • Website Designs
    • Navigation Bars
    • Sidebar Menu
    • Card Designs
    • More
      • CSS Buttons
      • Glowing Effects
      • Social Media Buttons
      • Preloader or Loaders
      • Neumorphism Designs
  • JavaScript
    • Form Validation
    • Image Sliders
    • API Projects
    • JavaScript Games
    • Canvas Projects
  • PHP
  • Contact us
Search
CodingNepal CodingNepal
  • Home
  • Blog
    • 10 Easy JavaScript Games for Beginners with Source Code

      10 Easy JavaScript Games for Beginners with Source Code

      10 Best JavaScript Projects with Free Source Code JavaScript Projects for Beginners

      Top 10 JavaScript Projects for Beginners with Source Code

      Top 10 Profile Card Template Designs in HTML & CSS

      Top 10 Profile Card Template Designs in HTML & CSS

      Top 10 Website Templates Design in HTML CSS & JavaScript

      10+ Website Templates Design in HTML CSS and JavaScript

      Top 5 Sidebar Menu Templates in HTML CSS & JavaScript

      Top 15 Sidebar Menu Templates in HTML CSS & JavaScript

  • HTML & CSS
    • Login Forms
    • Website Designs
    • Navigation Bars
    • Sidebar Menu
    • Card Designs
    • More
      • CSS Buttons
      • Glowing Effects
      • Social Media Buttons
      • Preloader or Loaders
      • Neumorphism Designs
  • JavaScript
    • Form Validation
    • Image Sliders
    • API Projects
    • JavaScript Games
    • Canvas Projects
  • PHP
  • Contact us
Home Javascript Password Strength Checker JavaScript

Password Strength Checker JavaScript

By
CodingNepal
-
July 5, 2020
Password Strength Checker JavaScript

Hey friends, today in this blog you’ll learn how to create a small project about Password Strength Checker JavaScript. Earlier I have shared a blog on how to create a Random Password Generator in JavaScript. And now it’s time to create a small and easy Password Strength Checker JavaScript.

A password strength checker indicates or shows that the user entered password be crack by using password-cracking attempts/methods like brute force and dictionary attacks. Password strength checker has a meter that measures user-entered passwords include a full combination of symbols, numbers, uppercase, and lowercase letters.

In this small project (Password Strength Checker JavaScript), at first, on the webpage, there is a white box with a title and a password input field. And when you enter some characters on this password field, the indicator or meter and an information text are shown on the bottom of an input field. There are three meters or indicators with different colors which indicates different info. There is also shown a password show or hide button.

If you’re feeling difficult to understand what I am saying then you can watch a full video tutorial of this Password Strength Checker JavaScript.

Video Tutorial of Password Strength Checker JavaScript

In this video, you have seen the Password Strength Checker and knew how this works. And I hope you have understood the basic codes behind creating this Password Strength Checker. The Indicator and text are shown according to the user’s password strength or character combinations. And this only possible with JavaScript.

If you like Password Strength Checker and want to get source codes then don’t worry I have given all codes of this project to the bottom of this page. if you’ve already created a signup form then you can use this password strength checker to check the password strength.

You might like this:

  • Random Password Generator App
  • File Upload Program In JavaScript
  • Email Validation Check in JavaScript

Password Strength Checker JavaScript [Source Codes]

To create this project (Password Strength Checker JavaScript). First, you need to create two Files: HTML and CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes into your HTML file. Remember, you’ve to create a file with a .html extension.

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Password Strength Checker JavaScript| CodingNepal</title>
      <link rel="stylesheet" href="style.css">
   </head>
   <body>
      <div class="container">
         <header>Password Strength Indicator <br>in HTML CSS & JavaScript</header>
         <form action="#">
            <div class="field">
               <input onkeyup="trigger()" type="password" placeholder="Type password">
               <span class="showBtn">SHOW</span>
            </div>
            <div class="indicator">
               <span class="weak"></span>
               <span class="medium"></span>
               <span class="strong"></span>
            </div>
            <div class="text"></div>
         </form>
      </div>
      <script>
         const indicator = document.querySelector(".indicator");
         const input = document.querySelector("input");
         const weak = document.querySelector(".weak");
         const medium = document.querySelector(".medium");
         const strong = document.querySelector(".strong");
         const text = document.querySelector(".text");
         const showBtn = document.querySelector(".showBtn");
         let regExpWeak = /[a-z]/;
         let regExpMedium = /\d+/;
         let regExpStrong = /.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/;
         function trigger(){
           if(input.value != ""){
             indicator.style.display = "block";
             indicator.style.display = "flex";
             if(input.value.length <= 3 && (input.value.match(regExpWeak) || input.value.match(regExpMedium) || input.value.match(regExpStrong)))no=1;
             if(input.value.length >= 6 && ((input.value.match(regExpWeak) && input.value.match(regExpMedium)) || (input.value.match(regExpMedium) && input.value.match(regExpStrong)) || (input.value.match(regExpWeak) && input.value.match(regExpStrong))))no=2;
             if(input.value.length >= 6 && input.value.match(regExpWeak) && input.value.match(regExpMedium) && input.value.match(regExpStrong))no=3;
             if(no==1){
               weak.classList.add("active");
               text.style.display = "block";
               text.textContent = "Your password is too week";
               text.classList.add("weak");
             }
             if(no==2){
               medium.classList.add("active");
               text.textContent = "Your password is medium";
               text.classList.add("medium");
             }else{
               medium.classList.remove("active");
               text.classList.remove("medium");
             }
             if(no==3){
               weak.classList.add("active");
               medium.classList.add("active");
               strong.classList.add("active");
               text.textContent = "Your password is strong";
               text.classList.add("strong");
             }else{
               strong.classList.remove("active");
               text.classList.remove("strong");
             }
             showBtn.style.display = "block";
             showBtn.onclick = function(){
               if(input.type == "password"){
                 input.type = "text";
                 showBtn.textContent = "HIDE";
                 showBtn.style.color = "#23ad5c";
               }else{
                 input.type = "password";
                 showBtn.textContent = "SHOW";
                 showBtn.style.color = "#000";
               }
             }
           }else{
             indicator.style.display = "none";
             text.style.display = "none";
             showBtn.style.display = "none";
           }
         }
      </script>
   </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@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;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  text-align: center;
  background: #f2f2f2;
}
.container{
  background: #fff;
  padding: 20px 30px;
  width: 420px;
  border-radius: 5px;
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
}
.container header{
  font-size: 24px;
  font-weight: 600;
  line-height: 33px;
}
.container form{
  margin: 20px 5px 10px 5px;
  position: relative;
}
.container form .field{
  height: 45px;
  width: 100%;
  display: flex;
  position: relative;
}
form .field input{
  width: 100%;
  height: 100%;
  border: 1px solid lightgrey;
  padding-left: 15px;
  outline: none;
  border-radius: 5px;
  font-size: 17px;
  transition: all 0.3s;
}
form .field input:focus{
  border-color: #27ae60;
  box-shadow: inset 0 0 3px #2fd072;
}
form .field .showBtn{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: none;
  user-select: none;
}
form .indicator{
  height: 10px;
  margin: 10px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  display: none;
}
form .indicator span{
  position: relative;
  height: 100%;
  width: 100%;
  background: lightgrey;
  border-radius: 5px;
}
form .indicator span:nth-child(2){
  margin: 0 3px;
}
form .indicator span.active:before{
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 5px;
}
.indicator span.weak:before{
  background-color: #ff4757;
}
.indicator span.medium:before{
  background-color: orange;
}
.indicator span.strong:before{
  background-color: #23ad5c;
}
form .text{
  font-size: 20px;
  font-weight: 500;
  display: none;
  margin-bottom: -10px;
}
form .text.weak{
  color: #ff4757;
}
form .text.medium{
  color: orange;
}
form .text.strong{
  color: #23ad5c;
}

That’s all, now you’ve successfully created a Password Strength Checker using HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any error/problem, please comment down or contact us from the contact page.

  • TAGS
  • Password Strength Check
  • Password Strength Checker JavaScript
  • Password Strength Indicator
  • Password Strength Meter
Share
Facebook
WhatsApp
Twitter
Copy URL
    Previous articleButton Ripple Effect in HTML CSS & JavaScript
    Next articleCSS3 – Neumorphism Pagination Design
    CodingNepal

    RELATED ARTICLESMORE FROM AUTHOR

    Build An AI Image Generator Website in HTML CSS and JavaScript

    Build An AI Image Generator Website in HTML CSS and JavaScript

    Create Responsive Image Slider in HTML CSS and JavaScript Image Slider in JavaScript

    Create A Responsive Image Slider in HTML CSS and JavaScript

    Create Website with Login & Registration Form in HTML CSS and JavaScript

    Create Website with Login & Registration Form in HTML CSS and JavaScript

    Recent Posts

    Build An AI Image Generator Website in HTML CSS and JavaScript

    Build An AI Image Generator Website in HTML CSS and JavaScript

    December 15, 2023
    How to Create Responsive Fiverr Website in HTML CSS and JavaScript

    How to Create Responsive Fiverr Website in HTML and CSS

    October 11, 2023
    Create A Responsive Coffee Website in HTML and CSS

    Create A Responsive Coffee Website in HTML and CSS

    October 1, 2023
    Create Beautiful Responsive Cards in HTML and CSS

    How to Create Responsive Cards in HTML and CSS

    September 23, 2023
    Create A Responsive Footer in HTML and CSS Only

    Create A Responsive Footer Section in HTML and CSS

    September 16, 2023

    Featured Post

    Build An Image Editor in HTML CSS & JavaScript

    Build An Image Editor in HTML CSS & JavaScript

    CodingNepal - July 15, 2022 11

    Categories

    • HTML and CSS225
    • Javascript168
    • JavaScript Projects97
    • Login Form51
    • Card Design43
    • Navigation Bar35
    • Website Designs25
    • Image Slider21
    • CSS Buttons20
    • Sidebar Menu17
    • JavaScript Games16
    • API Projects15
    • Preloader or Loader15
    • Form Validation14
    • PHP12
    CodingNepal
    ABOUT US
    CodingNepal is a blog dedicated to providing valuable and informative content about web development technologies such as HTML, CSS, JavaScript, and PHP... Read more
    FOLLOW US
    Facebook Instagram Youtube
    • About us
    • Terms & Conditions
    • Privacy policy
    • Contact us
    Copyright © 2024 CodingNepal All Rights Reserved

    AdBlock Detected

    Ad