Password Validation Using JavaScript

Hey Programmers, Welcome to a Another JavaScript Project Blog, In this We Will Be Creating a Password Validation Using JavaScript This Password Validation Tells The Strength Of the Password to the Users. And This is Web App is Created Using HTML, CSS & JavaScript.

You Might Have Seen This In Many Websites When You Create Your Password, When You Enter a Password With Less Special Characters With Less Letters It Says that The Password is Weak, Go For a Strong One.

And This is How Your Project Will Look Like After Writing HTML & CSS Codes:

Also Read:

• Create Facebook Post Clone Using HTML, CSS & JavaScript

• Typing Animation Using HTML & CSS

• To-Do List HTML,CSS & JavaScript

Before We Proceed With the This is For the Beginners Who are New in This And Don’t Know How to Start Then, You First Create index.html And Then a style.css File.

HTML CODE:

index.html File of Password Validation Project:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Know Password Strength</title>
   <link rel="stylesheet" href="style.css">
   <!-- FONT AWESOME CDN -->
   <script src="https://kit.fontawesome.com/406c1fcfd3.js" crossorigin="anonymous"></script>
   <!-- FONT AWESOME CDN -->
</head>
<body>
   <h2>Password Validiation HTML & CSS</h2>
   <div class="main">
      <div class="input-container">
    <input type="password" id="password" placeholder="Enter your Password">
    <button type="submit"><i class="fa-solid fa-arrow-right"></i></button>
    <p class="output"><b>Your Password Strength is: <span id="strength"></span></b></p>
   </div>

   <script>
      var pass = document.querySelector("#password");
      var msg  = document.querySelector(".output");
      var str = document.querySelector("#strength");

      pass.addEventListener('input', () => {
         if(pass.value.length > 0){
            msg.style.display = "block";
         }
         else{
            msg.style.display = "none";
         }
         if(pass.value.length < 4){
            str.innerHTML = "Weak, Try Something Hard";

         }
         else if(pass.value.length < 8){
            str.innerHTML = "Medium, It Is Okay"; 
         }
         else if(pass.value.length < 16){
            str.innerHTML = "Strong, Your Password Powerful"; 
         }
      })

   </script>
</body>
</html>

CSS CODE:

style.css File of Password Validation Project:

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap');
*{
  margin: 0;
  padding: 0;
  font-family: 'Lato', sans-serif;
}
body{
background-color: #111;
}
.main{
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.input-container{
width: 400px;
max-width: 90%;
position: relative;
}
.input-container input{
  width: 100%;
  height: 60px;
  padding: 0 20px;
  border: 1px solid	#00FFFF;
  outline: none;
  color: #fff;
  background: transparent;
}
button{
  background: transparent;
  cursor: pointer;
  outline: none;
  border: #fffb00;
  border-radius: 5px;
  position: absolute;
  top: 50%;
  font-size: 30px;
  color: #fffb00;
  transform: translateY(-50%);
  right: 15px;
}
.output{
  position: absolute;
  bottom: -30px;
  color: #fff;
  font-size: 15px;
  display: none;
}
:placeholder{
  font-size: 15px;
}
h2{
  text-align: center;
  justify-content: center;
  align-items: center;
  padding: 90px;
  margin-left: 30px;
  margin-bottom: -210px;
  color: #fffb00;
}

So This Was it For Today’s Blog Till Then Keep Coding Keep Exploring!

DOWNLOAD SOURCE CODE