Graduate Assignment 4

Encrypting jQuery Exercise

by Larry Adams

HTML

<div id="content">	
				<!-- form start-->
				<form id="register">
					<label for="password">Password : </label>
					<input name="password" id="password" type="password"/>
					<span id="result"></span>
				</form>		
				<!-- form end-->
			</div>

CSS

html, body, ul, ol, li, form, fieldset, legend{
	margin: 0;
	padding: 0;
}

body{
	background: #CCC repeat;
	font-family: 'Vollkorn', serif, Arial;
	font-size: 15px;
	line-height: 1.5;
}

h1, h2, h3, h4, h5, h6, p { 
	margin: 0; 
}
		
p{
	margin-bottom:15px;
}
		
a{
	color:#0073BF;
	text-decoration:none;
}
		
#container{			
	width:600px;
	margin:0 auto;
	background:#ffffff;
	padding:20px;
}

#header{
	text-align:center;
	margin:20px 0 40px;
}
		
#footer{
	text-align:center;
	margin-top:40px;
}

#register {
	margin-left:100px;	
}
#register label{
	margin-right:5px;
}
#register input {
	padding:5px 7px;
	border:1px solid #d5d9da;
	box-shadow: 0 0 5px #e8e9eb inset;
	width:250px;
	font-size:1em;
	outline:0;
}

#result{
	margin-left:5px;
}

#register .short{
	color:#FF0000;
}

#register .weak{
	color:#E66C2C;
}

#register .good{
	color:#2D98F3;
}

#register .strong{
	color:#006400;
}

JavaScript

// jQuery Password Checker

/*
 * Base code was used from
 * http://runnable.com/UfJrnXtk2tZXAAA1/how-to-check-password-strength-using-jquery
 * How to check password strength using jQuery

Assignment Task is to use a password generator and set the parameters in jQuery to the new parameters in the password for better security
    
*/


/*
	jQuery document ready.
*/
$(document).ready(function()
{
	/*
		assigning keyup event to password field
		so everytime user type code will execute
	*/

	$('#password').keyup(function()
	{
		$('#result').html(checkStrength($('#password').val()))
	})	
	
	/*
		checkStrength is function which will do the 
		main password strength checking for us
	*/
	
	function checkStrength(password)
	{
		//initial strength
		var strength = 0
		
		//if the password length is less than 6, return message.
		if (password.length < 6) { 
			$('#result').removeClass()
			$('#result').addClass('short')
			return 'Too short' 
		}
		
		//length is ok, lets continue.
		
		//if length is 8 characters or more, increase strength value
		if (password.length > 7) strength += 1
		
		//if password contains both lower and uppercase characters, increase strength value
		if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/))  strength += 1
		
		//if it has numbers and characters, increase strength value
		if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/))  strength += 1 
		
		//if it has one special character, increase strength value
		if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/))  strength += 1
		
		//if it has two special characters, increase strength value
		if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1
		
		//now we have calculated strength value, we can return messages
		
		//if value is less than 2
		if (strength < 2 )
		{
			$('#result').removeClass()
			$('#result').addClass('weak')
			return 'Weak'			
		}
		else if (strength == 2...