<html>
<head>
	<title>Calculate MPG</title>
	<style>
	  label, input {display: block; margin-bottom: 15px;} 
          label { float: left; width:180px; text-align: right;}
          input { margin-left:200px;}
	</style>
	<script>
		var $ = function(id){
		    return document.getElementById(id);
		};
		var calculateMpg = function(miles, gallons){
		    var mpg = miles / gallons;
		    mpg = mpg.toFixed(1);
		    return mpg;
		};
		var processEntries = function(){
		    var miles = parseFloat($("miles").value);
		    var gallons = parseFloat($("gallons").value);
		    if(isNaN(miles) || isNaN(gallons))
			alert("Both entries must be numeric");
		    else
			$("mpg").value = calculateMpg(miles, gallons);
		};
		window.onload = function(){
		    $("calculate").onclick = processEntries;
		    $("miles").focus();
		};
	</script>
</head>
<body>
    <main>
	<h1>Calculate Miles Per Gallon</h1>
	<label for = "miles">Miles Driven:</label>
	<input type="text" id="miles" />
	<label for = "gallons">Gallons of Gas Used:</label>
	<input type="text" id="gallons" />
	<label for = "mpg">Miles Per Gallon</label>
	<input type="text" id="mpg" disabled />
	<label>&nbsp;</label>   
	<input type="button" id="calculate" value="Calculate MPG" />
   </main>  
</body>
</html>
Calculate MPG

Calculate Miles Per Gallon