JavaScript Strong Password Checker – CodingNepal https://www.codingnepalweb.com CodingNepal is a blog dedicated to providing valuable and informative content about web development technologies such as HTML, CSS, JavaScript, and PHP. Sun, 14 May 2023 05:25:40 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.2 How to make Password Strength Checker in JavaScript https://www.codingnepalweb.com/password-strength-checker-javascript-2/ https://www.codingnepalweb.com/password-strength-checker-javascript-2/#respond Fri, 19 Nov 2021 21:11:19 +0000 https://www.codingnepalweb.com/?p=4197 How to make Password Strength Checker in JavaScript

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.

 

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.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>

@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;
}

If you face any difficulties while creating your Password Strength Checker or your code is not working as expected, you can download the source code files for this Check Password Strength for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

]]> https://www.codingnepalweb.com/password-strength-checker-javascript-2/feed/ 0 Check Password & Confirm Password using JavaScript https://www.codingnepalweb.com/check-password-confirm-password-javascript/ https://www.codingnepalweb.com/check-password-confirm-password-javascript/#respond Fri, 22 Oct 2021 21:11:19 +0000 https://www.codingnepalweb.com/?p=4201 Check Password & Confirm Password using JavaScript

Hello friend, hope you are doing well, today are going to create some useful project like Check Password & Confirm Password using HTML CSS and JavaScript. There are lots of JavaScript projects I have created for beginners to advance, I am sure these will be also very awesome and useful projects.

Check password and confirm password features are mostly used, while we are going to set our new password to login into a website. It helps users to remember their passwords because they have to match the password in both input fields.

Let’s have a look at the given image of your projects [Check Password & Confirm Password], The upper input field is inactive condition but the second input field and button are disabled. It means we can not enter characters on the second input field and we cannot click on the button. When the user enters eight or more than eight characters on the first input field then second input field and button will activate. After clicking on the button we know that our password matched or not.

Along with this, I have added some animation on the input field, that will happen when we focus on the input field, and also I have added password show or hide features while we click on the eye icon.

Rather than words, I would like to show you the real demo of this program [Check Password & Confirm Password using JavaScript], Now we are going to watch the video tutorial that is provided below. By watching the live video tutorial we will see the real demo of this program and get the idea of how all the HTML CSS and JavaScript codes are working properly and perfectly.

Check Password & Confirm Password in JavaScript

I have provided all the HTML CSS and JavaScript source code that I have used to create this program Check Password & Confirm Password, Password show and hide while clicking on the eye icon and Input field animation on focus. Before jumping into the source code file, you need to know some basic concepts of this program and tutorial.

As you have seen on the video tutorial of this program [Check Password & Confirm Password using JavaScript]. At first, we can only focus and type in the first input field. The second input field and button are in disabled form. When I type eight words on the first input field then the second field is activated and the button also.

At first, our typed password is in dot form, after I clicked on the eye icon our password converted into alphabet or number form. By clicking on the button We knew that you have entered a similar password or something different.

To make input field animation and UI design I have used only HTML and CSS. And to make the password show and hide while clicking on the eye button and to check the password and confirm the password I used JavaScript.

You Might Like This:

Check Password & Confirm Password [Source Code]

To get the following HTML CSS and JavaScript code for Check Password & Confirm Password, Password show and hide while clicking on the eye icon and Input label up animation. 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.

 

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
     <title> Check Password and Confirm Password </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="wrapper">
      <div class="input-box">
        <input id="create_pw" type="password" required>
        <label>Create password</label>
      </div>
      <div class="input-box">
        <input id="confirm_pw" type="password" required disabled>
        <label>Confirm password</label>
        <i class="fas fa-eye-slash show"></i>
      </div>
      <div class="alert">
        <i class="fas fa-exclamation-circle error"></i>
        <span class="text">Enter at least 8 characters</span>
      </div>
      <div class="input-box button">
        <input id="button" type="button" value="Check" disabled>
      </div>
  </div>
  
  <script>
  const createPw = document.querySelector("#create_pw"),
   confirmPw = document.querySelector("#confirm_pw"),
   pwShow = document.querySelector(".show"),
   alertIcon = document.querySelector(".error"),
   alertText= document.querySelector(".text"),
   submitBtn = document.querySelector("#button");

   pwShow.addEventListener("click", ()=>{
     if((createPw.type === "password") && (confirmPw.type === "password")){
       createPw.type = "text";
       confirmPw.type = "text";
       pwShow.classList.replace("fa-eye-slash","fa-eye");
     }else {
       createPw.type = "password";
       confirmPw.type = "password";
       pwShow.classList.replace("fa-eye","fa-eye-slash");
     }
   });

   createPw.addEventListener("input", ()=>{
     let val = createPw.value.trim()
     if(val.length >= 8){
       confirmPw.removeAttribute("disabled");
       submitBtn.removeAttribute("disabled");
       submitBtn.classList.add("active");
     }else {
       confirmPw.setAttribute("disabled", true);
       submitBtn.setAttribute("disabled", true);
       submitBtn.classList.remove("active");
       confirmPw.value = "";
       alertText.style.color = "#a6a6a6";
       alertText.innerText = "Enter at least 8 characters";
       alertIcon.style.display = "none";
     }
   });

  submitBtn.addEventListener("click", ()=>{
   if(createPw.value === confirmPw.value){
     alertText.innerText = "Password matched";
     alertIcon.style.display = "none";
     alertText.style.color = "#4070F4";
   }else {
     alertText.innerText = "Password didn't matched";
     alertIcon.style.display = "block";
     alertText.style.color = "#D93025";
   }
  });
  </script>

</body>
</html>

/* Google Font Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins" , sans-serif;
}
body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4070F4;
  padding: 0 35px;
}
.wrapper{
  position: relative;
  background: #fff;
  max-width: 480px;
  width: 100%;
  padding: 35px 40px;
  border-radius: 6px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
.input-box{
  position: relative;
  height: 65px;
  margin: 25px 0;
}
.input-box input{
  position: relative;
  height: 100%;
  width: 100%;
  outline: none;
  color: #333;
  font-size: 18px;
  font-weight: 500;
  padding: 0 40px 0 16px;
  border: 2px solid lightgrey;
  border-radius: 6px;
  transition: all 0.3s ease;
}
.input-box input:focus,
.input-box input:valid{
  border-color: #4070F4;
}
.input-box i,
.input-box label{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #a6a6a6;
  transition: all 0.3s ease;
}
.input-box label{
  left: 15px;
  font-size: 18px;
  font-weight: 400;
  background: #fff;
  padding: 0 6px;
  pointer-events: none;
}
.input-box input:focus ~ label,
.input-box input:valid ~ label{
  top: 0;
  font-size: 14px;
  color: #4070F4;
}
.input-box i{
  right: 15px;
  cursor: pointer;
  padding: 8px;
}
.alert{
  display: flex;
  align-items: center;
  margin-top: -13px;
}
.alert .error{
  color: #D93025;
  font-size: 18px;
  display: none;
  margin-right: 8px;
}
 .text{
  font-size: 18px;
  font-weight: 400;
  color: #a6a6a6;
}
.input-box.button input{
  border: none;
  font-size: 20px;
  color: #fff;
  letter-spacing: 1px;
  background: #4070F4;
  cursor: not-allowed;
}
.input-box.button input.active:hover{
  background: #265df2;
  cursor: pointer;
}

If you face any difficulties while creating your Password and Confirm Password Checker or your code is not working as expected, you can download the source code files for this Confirm and Created Password Checker for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

]]> https://www.codingnepalweb.com/check-password-confirm-password-javascript/feed/ 0