Skip to content
Home » Blogs » Password Validation Using JavaScript

Password Validation Using JavaScript3 min read

Password Validation

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.


index.html File of Password Validation Project:

<!DOCTYPE html>
<html lang="en">
   <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="" crossorigin="anonymous"></script>
   <!-- FONT AWESOME CDN -->
   <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>

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

      pass.addEventListener('input', () => {
         if(pass.value.length > 0){
   = "block";
   = "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"; 



style.css File of Password Validation Project:

@import url('');
  margin: 0;
  padding: 0;
  font-family: 'Lato', sans-serif;
background-color: #111;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
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;
  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;
  position: absolute;
  bottom: -30px;
  color: #fff;
  font-size: 15px;
  display: none;
  font-size: 15px;
  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!


Tanmay Sinha


The Ultimate Managed Hosting Platform