indexzero/index.html

## index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link href="styles.css" media="screen" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script type="text/javascript" src="sq-foot.js"></script>
  </head>
  <body>
    <div class="container">
      <h2 id="sqfoot-result" class="f_100"></h2>
      <form id="sqfoot-form" novalidate="">
        <div id="width-container" class="field f_100">
          <label for="width">Width</label> <input type="text" name="width" id="width" value="10" required="required" pattern="\d+.?\d+">
        </div>
        <div id="height-container" class="field f_100">
          <label for="height">Height</label> <input type="text" name="height" id="height" value="10" required="required" pattern="\d+.?\d+">
        </div>
        <div id="form-submit" class="field f_100 clearfix submit">
          <input type="submit" value="Submit">
        </div>
      </form>
    </div>
  </body>
</html>

## sq-foot.js
$(document).ready(function() {
  //
  // Sets a single error (width or height)
  //
  function setError(type) {
    $('#' + type + '-container')
      .find('label')
      .after('<span class="error">' + type + ' must be a number.</span>');
  }

  //
  // Sets all errors and returns a value
  // indicating if the form is valid.
  //
  function isValid(width, height) {
    var isValid = true;

    //
    // Reset errors
    //
    $('.field').find('.error').remove();
    $('#sqfoot-result').text('');

    if (isNaN(height)) {
      setError('height');
      isValid = false;
    }

    if (isNaN(width)) {
      setError('width');
      isValid = false;
    }

    return isValid;
  }

  /**
   * Handle the form submission, display success message if
   * invalid input is supplied. Otherwise display the output
   * in the target div.
   */
  $('#sqfoot-form').submit(function () {
    var inputs = {
      height: $('#height').val(),
      width:  $('#width').val()
    };

    var values = {
      height: parseFloat(inputs.height),
      width: parseFloat(inputs.width)
    };

    if (isValid(values.width, values.height)) {
      $('#sqfoot-result').text('Calculated area (sqft): ' + (values.width * values.height).toFixed(4));
    }

    return false;
  });
});

## styles.css
/** Basic Styling **/
.container {
  font-size: 75%;
  color: #222;
  background: #fff;
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}

/** Field Styles **/
.container .field, #form-title.field {
  padding-bottom: 12px;
  padding-top: 12px;
  position: relative;
  clear: both;
}

/** Field Widths */
.f_100 {
  width: 96%;
  display: inline;
  float: left;
  margin-left: 2%;
  margin-right: 2%; /* jquery ui resize grid hack - not sure why */
}

.container input {
  width:100%;
  font: 16px/24px Helvetica Neue, "Arial", Helvetica, Verdana, sans-serif;
  padding: 6px 0;
  color: #999999;
  border: 1px solid #d9d9d9;
  outline: none;
  display: inline-block;
  position: relative;
  z-index: 2;
  box-shadow: 0 0 10px #eee inset;
  -moz-box-shadow: 0 0 10px #eee inset;
  -webkit-box-shadow: 0 0 10px #eee inset;
  -ms-box-shadow: 0 0 10px #eee inset;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
}

.container input:focus {
  -webkit-box-shadow: 0px 0px 5px #bfdeff;
  -moz-box-shadow: 0px 0px 5px #bfdeff;
  box-shadow: 0px 0px 5px #bfdeff;
}

.container label {
  color: #666;
  text-align: left;
  font: 16px/24px Helvetica Neue, "Arial", Helvetica, Verdana, sans-serif;
}

.container .submit input {
  text-align: center;
  font-size: 14px;
  text-decoration: none;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  text-shadow: 1px 1px 0px #fff;
  display: block;
  margin: 12px -2px 12px 0;
  text-align: center;
  float: right;
  padding: 6px 12px;
  height: 36px;
  cursor: pointer;
  min-width: 96px;
  width:auto;
  background: #FBFBFB; /* old browsers */
  background: -moz-linear-gradient(top, #FBFBFB 0%, #EEEEEE 99%); /* firefox */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FBFBFB), color-stop(99%, #EEEEEE)); /* webkit */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#FBFBFB', endColorstr = '#EEEEEE', GradientType = 0); /* ie */    border: 1px solid #cfcfcf;
  font-weight: bold;
  color: #666;
}

/**Error Messages **/
.container .error {
  height: 16px;
  font: 11px/16px Helvetica Neue, "Arial", Helvetica, Verdana, sans-serif;
  color: #ff0033;
  padding-left: 12px;
  z-index: 999;
  position:relative;
  top:-1px;
}


/** Loading Indicator **/
.loading-text{
  position:relative;
  top:-3px;
}


/** Clearfix */
.clearfix:after {
  clear: both;
  content: ' ';
  display: block;
  font-size: 0;
  line-height: 0;
  visibility: hidden;
  width: 0;
  height: 0;
}

/*
    The following zoom:1 rule is specifically for IE6 + IE7.
    Move to separate stylesheet if invalid CSS is a problem.
*/
* html .clearfix,
*:first-child+html .clearfix {
  zoom: 1;
}
	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title></title>
	<link href="styles.css" media="screen" rel="stylesheet" type="text/css">
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
	<script type="text/javascript" src="sq-foot.js"></script>
	</head>
	<body>
	<div class="container">
	<h2 id="sqfoot-result" class="f_100"></h2>
	<form id="sqfoot-form" novalidate="">
	<div id="width-container" class="field f_100">
	<label for="width">Width</label> <input type="text" name="width" id="width" value="10" required="required" pattern="\d+.?\d+">
	</div>
	<div id="height-container" class="field f_100">
	<label for="height">Height</label> <input type="text" name="height" id="height" value="10" required="required" pattern="\d+.?\d+">
	</div>
	<div id="form-submit" class="field f_100 clearfix submit">
	<input type="submit" value="Submit">
	</div>
	</form>
	</div>
	</body>
	</html>
	$(document).ready(function() {
	//
	// Sets a single error (width or height)
	//
	function setError(type) {
	$('#' + type + '-container')
	.find('label')
	.after('<span class="error">' + type + ' must be a number.</span>');
	}

	//
	// Sets all errors and returns a value
	// indicating if the form is valid.
	//
	function isValid(width, height) {
	var isValid = true;

	//
	// Reset errors
	//
	$('.field').find('.error').remove();
	$('#sqfoot-result').text('');

	if (isNaN(height)) {
	setError('height');
	isValid = false;
	}

	if (isNaN(width)) {
	setError('width');
	isValid = false;
	}

	return isValid;
	}

	/**
	* Handle the form submission, display success message if
	* invalid input is supplied. Otherwise display the output
	* in the target div.
	*/
	$('#sqfoot-form').submit(function () {
	var inputs = {
	height: $('#height').val(),
	width: $('#width').val()
	};

	var values = {
	height: parseFloat(inputs.height),
	width: parseFloat(inputs.width)
	};

	if (isValid(values.width, values.height)) {
	$('#sqfoot-result').text('Calculated area (sqft): ' + (values.width * values.height).toFixed(4));
	}

	return false;
	});
	});
	/ Basic Styling /
	.container {
	font-size: 75%;
	color: #222;
	background: #fff;
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	}

	/ Field Styles /
	.container .field, #form-title.field {
	padding-bottom: 12px;
	padding-top: 12px;
	position: relative;
	clear: both;
	}

	/** Field Widths */
	.f_100 {
	width: 96%;
	display: inline;
	float: left;
	margin-left: 2%;
	margin-right: 2%; /* jquery ui resize grid hack - not sure why */
	}

	.container input {
	width:100%;
	font: 16px/24px Helvetica Neue, "Arial", Helvetica, Verdana, sans-serif;
	padding: 6px 0;
	color: #999999;
	border: 1px solid #d9d9d9;
	outline: none;
	display: inline-block;
	position: relative;
	z-index: 2;
	box-shadow: 0 0 10px #eee inset;
	-moz-box-shadow: 0 0 10px #eee inset;
	-webkit-box-shadow: 0 0 10px #eee inset;
	-ms-box-shadow: 0 0 10px #eee inset;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-transition: .3s ease-in-out;
	-moz-transition: .3s ease-in-out;
	}

	.container input:focus {
	-webkit-box-shadow: 0px 0px 5px #bfdeff;
	-moz-box-shadow: 0px 0px 5px #bfdeff;
	box-shadow: 0px 0px 5px #bfdeff;
	}

	.container label {
	color: #666;
	text-align: left;
	font: 16px/24px Helvetica Neue, "Arial", Helvetica, Verdana, sans-serif;
	}

	.container .submit input {
	text-align: center;
	font-size: 14px;
	text-decoration: none;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	text-shadow: 1px 1px 0px #fff;
	display: block;
	margin: 12px -2px 12px 0;
	text-align: center;
	float: right;
	padding: 6px 12px;
	height: 36px;
	cursor: pointer;
	min-width: 96px;
	width:auto;
	background: #FBFBFB; /* old browsers */
	background: -moz-linear-gradient(top, #FBFBFB 0%, #EEEEEE 99%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FBFBFB), color-stop(99%, #EEEEEE)); /* webkit */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#FBFBFB', endColorstr = '#EEEEEE', GradientType = 0); /* ie */ border: 1px solid #cfcfcf;
	font-weight: bold;
	color: #666;
	}

	/Error Messages /
	.container .error {
	height: 16px;
	font: 11px/16px Helvetica Neue, "Arial", Helvetica, Verdana, sans-serif;
	color: #ff0033;
	padding-left: 12px;
	z-index: 999;
	position:relative;
	top:-1px;
	}


	/ Loading Indicator /
	.loading-text{
	position:relative;
	top:-3px;
	}


	/** Clearfix */
	.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
	}

	/*
	The following zoom:1 rule is specifically for IE6 + IE7.
	Move to separate stylesheet if invalid CSS is a problem.
	*/
	* html .clearfix,
	*:first-child+html .clearfix {
	zoom: 1;
	}