DEV Community

Madhuban Khatri
Madhuban Khatri

Posted on

1 2

JavaScript Password Strength Detector

In this Project, I am Creating a Password Strength Detector which can detect Password Strength using JavaScript Code. Detector can change self background into White, Red, Orange and Lime

Code is Here:

Html Code

<input type='password' id='pwd' oninput='myfun()'/>
<div id='idigator'></div>
Enter fullscreen mode Exit fullscreen mode

JavaScript Code:

function myfun()
{
   var txt, indigator;
   txt = document.getElementById('pwd');
   indigator = document.getElementById('indigator');

   if(txt.value.length==0)
   {
     indigator.style.background = 'white';
   }
   else if(txt.value.length<5)
   {
     indigator.style.background = 'red';
   }
   else if(txt.value.length<10)
   {
     indigator.style.background = 'orange';
   }
   else
   {
     indigator.style.background = 'lime';
   }
}
Enter fullscreen mode Exit fullscreen mode

If u need full code then watch the video above.

Thank You.

Top comments (2)

Collapse
 
_garybell profile image
Gary Bell

It's not so much a password strength detector as a length detector. Length is not equal to strength. there's not much different in strength between passwords 1111 and 11111.

The strength of a password should be based on the entropy, not just length. Use of numbers, symbols, and mixed-case letters should be encouraged, not just enforcing a mandatory length with no other considerations.

Collapse
 
madhubankhatri profile image
Madhuban Khatri

I'll improve this code soon...it is a demo purpose.
Normally we set our A/C password and website says more characters in field to create a Strong Password.
So I create this. 'More characters, More strong password'.

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay