CSS Password Strength Meter

HTML & CSS
1

I am trying to get this to work on my wordpress website Im designing for a school project. Any reasons why its not working. I took all the code from here: http://www.handycss.com/how/how-to-create-password-strength-meter/ and I pasted it in to the page here:http://www.sweetcakesbymichelle.com/cyber/security-guides/password-recommendations-security-guide/

I added all the code to that page. I didn’t create a separate JavaScript file or CSS file for this. Is that the problem or is something else missing?

Thanks for all the help!

2

In more detail, I have this CSS and Javascript in my header.php file so that it appears between the header tags. This is the code in my header tags:

<style type="text/css">
#passwordStrength
{
        height:15px;
        display:block;
        float:left;
}
.strength0
{
        width:250px;
        background:#cccccc;
}
.strength1
{
        width:40px;
        background:#ff0000;
}
.strength2
{
        width:75px;
        background:#ff5f5f;
}
.strength3
{
        width:150px;
        background:#56e500;
}
.strength4
{
        background:#399800;
        width:200px;
}

</style>
<STYLE TYPE="text/javascript">
function passwordStrength(password)
{
        var desc = new Array();
        desc[0] = "Very Weak";
        desc[1] = "Weak";
        desc[2] = "Better";
        desc[3] = "Good";
        desc[4] = "Strong";
        var score   = 0;

        //if password bigger than 10 give 1 point

        if (password.length > 10) score++;

        //if password has both lower and uppercase characters give 1 point

        if ( ( password.match(/[a-z]/) ) && ( password.match(/[A-Z]/) ) ) score++;

        //if password has at least one number give 1 point

        if (password.match(/d+/)) score++;

        //if password has at least one special caracther give 1 point

        if ( password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) ) score++;

         document.getElementById("passwordDescription").innerHTML = desc[score];
         document.getElementById("passwordStrength").className = "strength" + score;
}
</style>

Then in the body of the webpage I have this code here:

<h6>Password Strength Meter</h6>
<p></p>
<p>Enter your password below to see how it stacks up security wise.  Your password is judged based on the criteria listed above.</p>
<p>
<label for="pass"><strong>Password:</strong></label><span style="padding-left:58px"><input type="password" name="pass" id="pass" onkeyup="passwordStrength(this.value)" /></span>
                </p>
<p>
  <label for="pass2"><strong>Confirm Password:</strong></label><input type="password" name="pass2" id="pass2"/>
                </p>
<p>
                        <label for="passwordStrength"><strong>Password strength:</strong></label></p>
<div id="passwordDescription">Password not entered</div>
<div id="passwordStrength" class="strength0"></div>
</p>

Yet when I type a password into the fields nothing registers??? I don’t know where I went wrong. I thought this might make it easier to trouble shoot. Thanks again.

3

CSS is only for display, all the work is being done by the provided javascript.

So what they’ve given you is a function that you need to execute AND provide a value to.

going by the example, you’re going to want to add this inside your script tag, preferably at the bottom of the page.


var pass = document.getElementById('password');
pass.addEventListener('keyup', function(event) {
	// set value of input field to variable
	var value = this.value;

	// fire function to test password strength
	passwordStrength(value);
});
4

I took the javascript and placed it on the bottom of this particular html page (the password page), and I moved the CSS to my styles page which shouldnt do anything. So this is now my code for the password page: http://www.sweetcakesbymichelle.com/cyber/security-guides/password-recommendations-security-guide/

<STYLE TYPE="text/javascript">
function passwordStrength(password)
{
        var desc = new Array();
        desc[0] = "Very Weak";
        desc[1] = "Weak";
        desc[2] = "Better";
        desc[3] = "Good";
        desc[4] = "Strong";
        var score   = 0;

        //if password bigger than 10 give 1 point

        if (password.length > 10) score++;

        //if password has both lower and uppercase characters give 1 point

        if ( ( password.match(/[a-z]/) ) && ( password.match(/[A-Z]/) ) ) score++;

        //if password has at least one number give 1 point

        if (password.match(/d+/)) score++;

        //if password has at least one special caracther give 1 point

        if ( password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) ) score++;

         document.getElementById("passwordDescription").innerHTML = desc[score];
         document.getElementById("passwordStrength").className = "strength" + score;
}
var pass = document.getElementById('password');
pass.addEventListener('keyup', function(event) {
	// set value of input field to variable
	var value = this.value;

	// fire function to test password strength
	passwordStrength(value);
});
</style>

So the javascript is at the bottom of the page and the css is in the styles.css file and still nothing happens. Again the link is above if you want to check it out. Thank you for your reply.

5

Hi,

You have your script inside a style tag and it should be inside a script tag!


<STYLE TYPE="text/javascript">
function passwordStrength(password)

It should be:


<script>
function passwordStrength(password)

Remember to change the closing tag to script also.

As downtroden said you should then move that script down to the body of the page before the closing body tag.


<script>
// script content etc..
</script>
</body>
6

Got it working! That script tag and the java came in handy! Thanks a lot!

7

[ot]

djk2375, Java and JavaScript are completely different languages. :)[/ot]