JavaScript password strength inidicator

This one is pretty simple yet quite cool. It’s all nice and simple JS on the page so it’s nice and easy to implement.

I’ve set up a working example here: http://www.greynet.co.uk/jspwstrength

I’ve put the actual validation bit in to a nice function that simply returns a number between 0 and 5. I’m using regex to check for numbers, lower case letters, symbols, upper case letters and a length greater than 8. This is the function that does the working out, reasonably simple:

function reportFieldStrength(fieldVal) { //This will return a number betweeen 0 and 3
	var strength = 0 * 0;

	if (fieldVal.length > 0) {
		var intPattern = new RegExp("[1-9]");
		if (intPattern.test(fieldVal)) { //Check for numbers first
			strength++;
		}

		var lwcsPattern = new RegExp("[a-z]");
		if (lwcsPattern.test(fieldVal)) { //Check for lower case letters present
			strength++;
		}

		var upcsPattern = new RegExp("[A-Z]");
		if (upcsPattern.test(fieldVal)) { //Check for uppercase letters present
			strength++;
		}

		var smblPattern = new RegExp(/[$-/:-?{-~!"^_`\[\]]/);
		if(smblPattern.test(fieldVal)) { //Check for symbols present
			strength++;
		}
		
		if(fieldVal.length > 8){ //If the field is longer than 8 chars then that's a bit more secure
			strength++;	
		}
	}

	return strength;
}

Once the function is set up, I’m doing something like this as an example:

$("#pwField").bind("change paste keyup", function () {
	var strength = reportFieldStrength($(this).val());

	//We want to make the feedback a bit more visual - the max is 5, divide the result by this
	strength = strength / 5;

	$("span#pwStrenghResult").css({
		backgroundColor: '#000',
		opacity: strength,
		width: "100px",
		height: "20px",
		display: "inline-block",
		verticalAlign: "middle"
	});

});

You can also see a working example of this below. As you type a test phrase a block will appear. The stronger the password, the darker the block will become.


PHP hit counter

I needed to knock together a quick hit counter for a PHP site I was working on the other day.

Nice and simple but might help out a merry Googler!

You’ll need a file called hits.txt that PHP can write too. Once loaded, you can do the following anywhere on a page to display the current hit count:

<?php print $CurrentHitCount; ?>

Hit Counter Code:

	session_start(); 

	if(isset($_SESSION['newUser'])) {
		$new = $_SESSION['newUser'];
	} else {
		$new = "true";
	} 

	if($new == "true") {
		$CurrentHitCount = fread(fopen("hits.txt", 'r'), filesize("hits.txt"));
		$NoToAdd = "1"; $NewHits = $CurrentHitCount + $NoToAdd;
		fwrite(fopen("hits.txt", 'w'), "$NewHits"); $_SESSION['newUser'] = "false";
	} 

	$CurrentHitCount = fread(fopen("hits.txt", 'r'), filesize("hits.txt"));

Webcam capture and save

This is something I made years ago, I know I didn’t write it all myself. I grabbed it from something else and ripped it apart to form a very basic example.

As per usual, it’s in PHP, this was the only real language I could write back in the day!

It will let you take a photo with a web camera and an image will be created & uploaded. I’m not sure how robust it is in older browsers but seems okay having a quick look around.

You can preview it here: http://www.greynet.co.uk/webcam

You can download the ZIP: Click Here