Password Validation

Password Validation Using JavaScript3 min read

Programming, HTML & CSS, 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
Latest posts by Tanmay Sinha (see all)

Author

  • Tanmay Sinha

    Founder & CEO of MrProgrammer.in | I help Learning Freaks to Step into the World of Programming and Our Mission is to Provide High Quality and Valuable Content to Our Users! We believe that everyone has the potential to learn to code, and we are committed to making that happen. Our courses are designed to be engaging and interactive, and we offer a variety of learning paths to meet the needs of all learners. We are also committed to providing our learners with the support they need to succeed, and we offer a variety of resources to help learners learn at their own pace. If you are interested in learning to code, we encourage you to check out our courses. We are confident that you will find our content to be high-quality, valuable, and makes sense.

Related posts:

Random Quote GeneratorRandom Quote Generator JavaScript3 min read Realtime Chat AppRealtime Chat Application Socket.io3 min read Login Sign Up FormGlassmorphism Login Form Using HTML & CSS5 min read Facebook Post CloneCreate Facebook Post Clone Using HTML, CSS & JavaScript8 min read Most Popular Programming Language 2022Most Popular Programming Language 20223 min read TO DO LISTTo-Do List HTML,CSS & JavaScript3 min read 5 Best Free Web Development Courses | Learn Web Development5 Best Free Web Development Courses | Learn Web Development3 min read App Vs Web Development | Which One Is Best?App Vs Web Development | Which One Is Best?2 min read