Skip to content
Home » Password Validation Using JavaScript

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:

image 2

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

Tanmay Sinha
What are PWAs? All About PWAs Can ChatGPT Beat Google? Can ChatGPT Replace Web Developer? Is Maths Important for Programming? Top 10 Programming Languages to Learn In 2023!