johnnyfreeman/index.css

## index.css
body {
    background-color: #7ac44d;
    /* IE9, iOS 3.2+ */
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxyYWRpYWxHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGN4PSIwJSIgY3k9IjEwMCUiIHI9IjE0MS40MjEzNTYyMzczMDk1JSI+PHN0b3Agc3RvcC1jb2xvcj0iI2YzZWYxNSIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjMDA5ODg1IiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMSIvPjwvcmFkaWFsR3JhZGllbnQ+PHJlY3QgeD0iLTUwIiB5PSItNTAiIHdpZHRoPSIxMDEiIGhlaWdodD0iMTAxIiBmaWxsPSJ1cmwoI3ZzZ2cpIiAvPjwvc3ZnPg==);
    /* Android 2.3- hack (needed for the actual radial gradient) */
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxyYWRpYWxHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGN4PSIwJSIgY3k9IjEwMCUiIHI9IjE0MS40MjEzNTYyMzczMDk1JSI+PHN0b3Agc3RvcC1jb2xvcj0iI2YzZWYxNSIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjMDA5ODg1IiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMSIvPjwvcmFkaWFsR3JhZGllbnQ+PHJlY3QgeD0iLTUwIiB5PSItNTAiIHdpZHRoPSIxMDEiIGhlaWdodD0iMTAxIiBmaWxsPSJ1cmwoI3ZzZ2cpIiAvPjwvc3ZnPg==),
        -webkit-gradient(radial, left bottom, 0, left bottom, 723,color-stop(0, rgb(243, 239, 21)),color-stop(1, rgb(0, 152, 133)));
    /* Android 2.3 */
    background-image: -webkit-radial-gradient(left bottom, ellipse farthest-corner,rgb(243, 239, 21) 0%,rgb(0, 152, 133) 100%);
    /* IE10+ */
    background-image: radial-gradient(ellipse farthest-corner at left bottom,rgb(243, 239, 21) 0%,rgb(0, 152, 133) 100%);
    background-image: -ms-radial-gradient(left bottom, ellipse farthest-corner,rgb(243, 239, 21) 0%,rgb(0, 152, 133) 100%);


    /* IE8- CSS hack */
    @media \0screen\,screen\9 {
        .gradient {
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fff3ef15",endColorstr="#ff009885",GradientType=0);
        }
    }
}

div.newForm {
    text-align: center;
    margin: 0 auto;
}

ul.requirements {
    list-style: none;
}

.failed {
    color: red;
}

## index.html
<!DOCTYPE html>
<html>
    <head>
        <title>Password Log-In Page</title>

        <link rel="stylesheet" type="text/css" href="index.css">
    </head>

    <body>
        <div class="newForm">
            <form action="" name="Form1" onsubmit="return isFormValid(this)">
                <label>Username: <input type="text" name="username" onkeyup="isUsernameValid(this)"></label><br>
                <label>Password: <input type="password" name="password" onkeyup="isPasswordValid(this)"></label><br>
                <input type="submit" value="Submit">

                <br><br>

                Requirements: <br>
                <ul class="requirements">
                    <li id="requirement1">* Username cannot be blank</li>
                    <li id="requirement2">* Password at least 8 characters</li>
                    <li id="requirement3">* Password at least 1 upper case (A-Z)</li>
                    <li id="requirement4">* Password at least 1 lower case (a-z)</li>
                    <li id="requirement5">* Password at least 1 number (0-9)</li>
                    <li id="requirement6">* Password at least 1 special character (~!@#$%)</li>
                </ul>
            </form>
        </div>


        <script src="index.js"></script>
    </body>
</html>

## index.js
/**
 * Since traversing the DOM is a very expensive operation,
 * it's best practice to only do it once and store as a
 * reference in a variable
 */
let requirement1 = document.getElementById('requirement1');
let requirement2 = document.getElementById('requirement2');
let requirement3 = document.getElementById('requirement3');
let requirement4 = document.getElementById('requirement4');
let requirement5 = document.getElementById('requirement5');
let requirement6 = document.getElementById('requirement6');

/**
 * Determines whether or not the entire form is valid.
 *
 * @param  {Object}  form   The Form element to be validated.
 * @return {Boolean}        True if valid, false if not.
 */
function isFormValid(form) {
    if (!isUsernameValid(form.username) || !isPasswordValid(form.password)) {
        return false;
    }

    return true;
};

/**
 * Determines if the Username field is valid
 *
 * @param  {Object}  field   The field to be validated.
 * @return {Boolean}         True if valid, false if not.
 */
function isUsernameValid(field) {
    let isValid = true;

    if (field.value == "") {
        requirement1.classList.add('failed');
        field.focus();
        isValid = false;
    } else {
        requirement1.classList.remove('failed');
    }

    return isValid;
}

/**
 * Determine if the Password field is valid
 *
 * @param  {Object}  field   The field to be validated.
 * @return {Boolean}         True if valid, false if not.
 */
function isPasswordValid(field) {
    let isValid = true;

    if (field.value.length < 8) {
        requirement2.classList.add('failed');
        field.focus();
        isValid = false;
    } else {
        requirement2.classList.remove('failed');
    }

    let upperCase = /[A-Z]/;
    if (!upperCase.test(field.value)) {
        requirement3.classList.add('failed');
        field.focus();
        isValid = false;
    } else {
        requirement3.classList.remove('failed');
    }

    let lowerCase = /[a-z]/;
    if (!lowerCase.test(field.value)) {
        requirement4.classList.add('failed');
        field.focus();
        isValid = false;
    } else {
        requirement4.classList.remove('failed');
    }

    let number = /[0-9]/;
    if (!number.test(field.value)) {
        requirement5.classList.add('failed');
        field.focus();
        isValid = false;
    } else {
        requirement5.classList.remove('failed');
    }

    let specialCharacter = /[\ -\/\:-\@\[-\`\{-\~]/;
    if (!specialCharacter.test(field.value)) {
        requirement6.classList.add('failed');
        field.focus();
        isValid = false;
    } else {
        requirement6.classList.remove('failed');
    }

    return isValid;
}
	body {
	background-color: #7ac44d;
	/* IE9, iOS 3.2+ */
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxyYWRpYWxHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGN4PSIwJSIgY3k9IjEwMCUiIHI9IjE0MS40MjEzNTYyMzczMDk1JSI+PHN0b3Agc3RvcC1jb2xvcj0iI2YzZWYxNSIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjMDA5ODg1IiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMSIvPjwvcmFkaWFsR3JhZGllbnQ+PHJlY3QgeD0iLTUwIiB5PSItNTAiIHdpZHRoPSIxMDEiIGhlaWdodD0iMTAxIiBmaWxsPSJ1cmwoI3ZzZ2cpIiAvPjwvc3ZnPg==);
	/* Android 2.3- hack (needed for the actual radial gradient) */
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxyYWRpYWxHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGN4PSIwJSIgY3k9IjEwMCUiIHI9IjE0MS40MjEzNTYyMzczMDk1JSI+PHN0b3Agc3RvcC1jb2xvcj0iI2YzZWYxNSIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjMDA5ODg1IiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMSIvPjwvcmFkaWFsR3JhZGllbnQ+PHJlY3QgeD0iLTUwIiB5PSItNTAiIHdpZHRoPSIxMDEiIGhlaWdodD0iMTAxIiBmaWxsPSJ1cmwoI3ZzZ2cpIiAvPjwvc3ZnPg==),
	-webkit-gradient(radial, left bottom, 0, left bottom, 723,color-stop(0, rgb(243, 239, 21)),color-stop(1, rgb(0, 152, 133)));
	/* Android 2.3 */
	background-image: -webkit-radial-gradient(left bottom, ellipse farthest-corner,rgb(243, 239, 21) 0%,rgb(0, 152, 133) 100%);
	/* IE10+ */
	background-image: radial-gradient(ellipse farthest-corner at left bottom,rgb(243, 239, 21) 0%,rgb(0, 152, 133) 100%);
	background-image: -ms-radial-gradient(left bottom, ellipse farthest-corner,rgb(243, 239, 21) 0%,rgb(0, 152, 133) 100%);


	/* IE8- CSS hack */
	@media \0screen\,screen\9 {
	.gradient {
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fff3ef15",endColorstr="#ff009885",GradientType=0);
	}
	}
	}

	div.newForm {
	text-align: center;
	margin: 0 auto;
	}

	ul.requirements {
	list-style: none;
	}

	.failed {
	color: red;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Password Log-In Page</title>

	<link rel="stylesheet" type="text/css" href="index.css">
	</head>

	<body>
	<div class="newForm">
	<form action="" name="Form1" onsubmit="return isFormValid(this)">
	<label>Username: <input type="text" name="username" onkeyup="isUsernameValid(this)"></label><br>
	<label>Password: <input type="password" name="password" onkeyup="isPasswordValid(this)"></label><br>
	<input type="submit" value="Submit">

	<br><br>

	Requirements: <br>
	<ul class="requirements">
	<li id="requirement1">* Username cannot be blank</li>
	<li id="requirement2">* Password at least 8 characters</li>
	<li id="requirement3">* Password at least 1 upper case (A-Z)</li>
	<li id="requirement4">* Password at least 1 lower case (a-z)</li>
	<li id="requirement5">* Password at least 1 number (0-9)</li>
	<li id="requirement6">* Password at least 1 special character (~!@#$%)</li>
	</ul>
	</form>
	</div>


	<script src="index.js"></script>
	</body>
	</html>
	/**
	* Since traversing the DOM is a very expensive operation,
	* it's best practice to only do it once and store as a
	* reference in a variable
	*/
	let requirement1 = document.getElementById('requirement1');
	let requirement2 = document.getElementById('requirement2');
	let requirement3 = document.getElementById('requirement3');
	let requirement4 = document.getElementById('requirement4');
	let requirement5 = document.getElementById('requirement5');
	let requirement6 = document.getElementById('requirement6');

	/**
	* Determines whether or not the entire form is valid.
	*
	* @param {Object} form The Form element to be validated.
	* @return {Boolean} True if valid, false if not.
	*/
	function isFormValid(form) {
	if (!isUsernameValid(form.username) \|\| !isPasswordValid(form.password)) {
	return false;
	}

	return true;
	};

	/**
	* Determines if the Username field is valid
	*
	* @param {Object} field The field to be validated.
	* @return {Boolean} True if valid, false if not.
	*/
	function isUsernameValid(field) {
	let isValid = true;

	if (field.value == "") {
	requirement1.classList.add('failed');
	field.focus();
	isValid = false;
	} else {
	requirement1.classList.remove('failed');
	}

	return isValid;
	}

	/**
	* Determine if the Password field is valid
	*
	* @param {Object} field The field to be validated.
	* @return {Boolean} True if valid, false if not.
	*/
	function isPasswordValid(field) {
	let isValid = true;

	if (field.value.length < 8) {
	requirement2.classList.add('failed');
	field.focus();
	isValid = false;
	} else {
	requirement2.classList.remove('failed');
	}

	let upperCase = /[A-Z]/;
	if (!upperCase.test(field.value)) {
	requirement3.classList.add('failed');
	field.focus();
	isValid = false;
	} else {
	requirement3.classList.remove('failed');
	}

	let lowerCase = /[a-z]/;
	if (!lowerCase.test(field.value)) {
	requirement4.classList.add('failed');
	field.focus();
	isValid = false;
	} else {
	requirement4.classList.remove('failed');
	}

	let number = /[0-9]/;
	if (!number.test(field.value)) {
	requirement5.classList.add('failed');
	field.focus();
	isValid = false;
	} else {
	requirement5.classList.remove('failed');
	}

	let specialCharacter = /[\ -\/\:-\@\[-\`\{-\~]/;
	if (!specialCharacter.test(field.value)) {
	requirement6.classList.add('failed');
	field.focus();
	isValid = false;
	} else {
	requirement6.classList.remove('failed');
	}

	return isValid;
	}