DEV Community

loading...

JavaScript Password Strength Detector

madhubankhatri profile image Madhuban Khatri ・1 min read

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.

Discussion (2)

pic
Editor guide
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 Author

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'.