Untitled

<html>
<head>
<title>Javascript Loan Amount Calculator</title>

<script type="text/javascript">

function loanAmount(){


				//gets users input
		 var loan = parseFloat( document.getElementById("loan").value );
		var starting = parseInt( document.getElementById("starting").value );
		var ending = parseInt( document.getElementById("ending").value );
		var years = parseInt( document.getElementById("years").value );
		var n = years * 12;
		var msg = "";
		//displaying the ouput
		msg += "<div>Loan Amount: $"+  loan + "</div>";
		msg += "<div>Number of years: "  + years + "</div>";
		msg += "<div>Starting interest rate: " + starting + "%" + "</div>";
		msg += "<div>Ending interest rate: " + ending + "%" +  "</div>";

			msg += "<table>";
			msg += "<tr>";
			msg += "<th>Interest Rate</th>";
			msg += "<th>Monthly Payment</th>";
			msg += "<th>Total Payment</th>";
			msg += "</tr>";
		// for loop
		for( var i = starting; i <= ending; i++) {
		var r = i / 1200;
		var monthlyPayment =	( loan * r * ( Math.pow ( 1 + r,n) ) ) / ( Math.pow ( 1 + r,n ) - 1);
		var total = n * monthlyPayment
		msg += "<tr>";
		msg += "<td>" + i + "%" + "</td>";
		msg += "<td>" + "$" + monthlyPayment.toFixed(2) + "</td>";
		msg += "<td>" + "$" + total.toFixed(2) + "</td>";
		msg += "</tr>";

		}

		msg += "</table>";


		//output//
		document.getElementById("output").innerHTML = msg;
}//ends Loanamount


</script>

<style type="text/css">

body {
	background-image: url("http://newton.ncc.edu/gansonj/ite101/img/bk2.jpg");
	color: darkblue;
	font-family: arial;
	text-align: center;
}

#pagewrap {
	border: 6px red double;
	padding: 20px;
	background-image: url("http://newton.ncc.edu/gansonj/ite101/img/swirls.jpg");
	width: 700px;
	margin: 25px auto 0px auto;
}

#heading {
	border: 6px red double;
	background-color: darkblue;
	font-size: 1.75em;
	padding: 15px;
	color: white;
}

#formdiv {
	margin-top: 15px;
	border: 6px darkblue double;
	padding: 15px 0px 0px 0px;
}

.formtext {
	margin-top: 4px;
}

table, th, td {
	border: 1px blue solid
}

table {
	margin: 10px auto;
	background-color:white;
}

table tr:nth-child(odd)
{
	background-color:#eee;
}

td {
	padding: 5px;
}

input[type=button] {

	border:2px black solid;
	border-radius: 15px;
}

</style>

</head>

<body>

<div id="pagewrap">

	<div id="heading">Javascript Loan Amount Calculator</div>

	<div id="formdiv">

		<form>

			<div class="formtext">Enter initial loan amount: </div>
			<input type="text" size="20" id="loan" />

			<div class="formtext">Enter starting interest rate: </div>
			<input type="text" size="20" id="starting" />

			<div class="formtext">Enter ending interest rate: </div>
			<input type="text" size="20" id="ending" />

			<div class="formtext">Enter how many years to borrow: </div>
			<input type="text" size="20" id="years"/>

 			<div style="margin-top:13px;">
				<input type="button"  value="Compute Monthly Payments" onClick="loanAmount()"/>
			</div>

		</form>

	</div> <!-- ends div#formdiv -->

	<div id="output"></div>

</div> <!-- ends div#pagewrap -->

</body>
</html>