Question

I have to make a password meter from scratch basically (can’t use outside frameworks like jquery), and I’m having 2 problems.

I can’t seem to find a way where when a user enters a certain character, it won’t jump the meter to a huge length.

And I can’t prevent that meter from getting to big, even by setting the width.

<input type="password" id="newPass" style="width:206px" onkeyup="strengthMeter()"/><br/><br/>
                <div style="width:100px;display:inline;"><div id="meter" style="background-color:red;width:10px;height:10px;"></div>
                    <span>Strength</span><span id="strength" style="float:right">Weak</span>
                </div>

function strengthMeter(){


    var password = $("newPass").value;
    var numEx = /\d/;
    var lcEx = new RegExp("[a-z]");
    var ucEx = new RegExp("[A-Z]");
    var symbols = ['/', '@', '#', '%', '&', '.', '!', '*', '+', '?', '|','(', ')', '[', ']', '{', '}', '\\'];
    var meterMult = 1;

    for(var k = 0; k < password.length; k++){
        if(numEx.test(password)){
            meterMult += 0.75;
            $("meter").style.width = " " + (10*meterMult) + "px";
        }

        if(ucEx.test(password)){
            meterMult += 1;
            $("meter").style.width = " " + (10*meterMult) + "px";
        }

        if(lcEx.test(password)){
            meterMult += 0.25;
            $("meter").style.width = " " + (10*meterMult) + "px";
        }

        for(var i = 0; i < symbols.length; i++){
            if(password.indexOf(symbols[i]) >= 0){
                meterMult += 1;
                $("meter").style.width = " " + (10*meterMult) + "px";
            }
            }
        if(meterMult >= 12){
            $("strength").innerHTML = "Strong";
            }
        else if(k >= 6){
            $("strength").innerHTML = "Medium";
        }
        else
            $("strength").innerHTML = "Weak";
        }

    }

The above has the div i am using to make the meter. basically, I am taking a div and expanding it within another div to make the meter, and that’s that. Please help! Thanks in advance.

Answer 1

I’ve reduced your code to a working jsFiddle. I see a couple funky things in the code that perhaps need to get sorted out first.

First, there appears to be no reason for this loop as all it’s doing is running the same code over and over again password.length times:

for(var k = 0; k < password.length; k++){

Did you mean to be examining each character in the password, one at a time in that loop? If so, that’s not what your code is doing.

As for the width, I would suggest that the easiest way is to set the width of the container to the max width you want and then set the width of the meter to be a percentage of the parent from 0 to 100.

Here’s a new version of your code (working here in a jsFiddle), revised in a bunch of ways:

1. Changed the width of the red bar to a percentage of it’s parent and capped it at 100% so it will never go beyond the parent width.
2. Check each char in the password individually
3. Set the width of the password bar only once
4. Change the layout of the bar to match the width of the input field

Here’s the code from the new version:

function strengthMeter() {
    var password = $("newPass").value;
    var numEx = /\d/;
    var lcEx = /[a-z]/;
    var ucEx = /[A-Z]/;
    var symbols = ['/', '@', '#', '%', '&', '.', '!', '*', '+', '?', '|','(', ')', '[', ']', '{', '}', '\\'];
    var meterMult = 1;

    for (var k = 0; k < password.length; k++) {
        var pchar = password.charAt(k);
        if(numEx.test(pchar)){
            meterMult += 0.75;
        }

        if(ucEx.test(pchar)){
            meterMult += 1;
        }

        if(lcEx.test(pchar)){
            meterMult += 0.25;
        }
    }

    for (var i = 0; i < symbols.length; i++) {
        if(password.indexOf(symbols[i]) >= 0) {
            meterMult += 1;
        }
    }

    // assume that 100% is a meterMult of 15
    var fullStrength = 15;
    $("meter").style.width = ((Math.min(fullStrength, meterMult)/fullStrength )*100) + "%";

    if(meterMult >= 12) {
        $("strength").innerHTML = "Strong";
    }
    else if(password.length >= 6) {
        $("strength").innerHTML = "Medium";
    }
    else {
        $("strength").innerHTML = "Weak";
    }
}

Obviously, you may want to tweak the weighting as desired.