mayfer/jquery_example.html

## jquery_example.html
<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <style type='text/css'>
            html { margin: 0; padding: 0; }
            body { margin: 0; padding: 30px; background: #049; font-family: Menlo, monospace; font-size: 11px; }
            #container { width: 600px; margin: 0 auto; }
            .red { background: #a00; }

            label { display: block; }
            body { color: #fff; }
        </style>

        <script type='text/javascript'>

            function removeRed() {
                return $('body').removeClass('red');
            }

            $(document).ready(function() {
                $('form').submit(function(event){
                    event.preventDefault();

                    var password1 = $('#password1').val();
                    var password2 = $('#password2').val();

                    if(password1 == password2) {
                        // passwords match
                        alert("ALL GOOD MANG");
                    } else {
                        // no match. flash the background red for 2 seconds.
                        $('body').addClass('red');
                        setTimeout(removeRed, 2000);
                    }
                });
            });

        </script>
    </head>
    <body>
        <div id='container'>
            <form>
                <label>
                    Password:
                    <input type='text' name='password' id='password1' />
                </label>
                <label>
                    Password again:
                    <input type='text' name='password-again' id='password2' />
                </label>
                <label>
                    <input type='submit' value='Sign up' />
                </label>
            </form>
        </div>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
	<style type='text/css'>
	html { margin: 0; padding: 0; }
	body { margin: 0; padding: 30px; background: #049; font-family: Menlo, monospace; font-size: 11px; }
	#container { width: 600px; margin: 0 auto; }
	.red { background: #a00; }

	label { display: block; }
	body { color: #fff; }
	</style>

	<script type='text/javascript'>

	function removeRed() {
	return $('body').removeClass('red');
	}

	$(document).ready(function() {
	$('form').submit(function(event){
	event.preventDefault();

	var password1 = $('#password1').val();
	var password2 = $('#password2').val();

	if(password1 == password2) {
	// passwords match
	alert("ALL GOOD MANG");
	} else {
	// no match. flash the background red for 2 seconds.
	$('body').addClass('red');
	setTimeout(removeRed, 2000);
	}
	});
	});

	</script>
	</head>
	<body>
	<div id='container'>
	<form>
	<label>
	Password:
	<input type='text' name='password' id='password1' />
	</label>
	<label>
	Password again:
	<input type='text' name='password-again' id='password2' />
	</label>
	<label>
	<input type='submit' value='Sign up' />
	</label>
	</form>
	</div>
	</body>
	</html>