HTML+JS for a Mortgage Payments Calculator

<!--

This is an HTML form that allows the user to enter data, and uses

JavaScript to display the results it computes back to the user. The

form elements are embedded in a table to improve/format their appearance.

Note that some of the form elements define "onChange" or "onClick"

event handlers. These handlers specify strings of JavaScript code to be

executed when the user enters data or clicks on a button.

-->

<FORM NAME="loandata">

<TABLE>

<TR><TD COLSPAN=3><BIG><B>Enter Loan Information:</B></BIG></TD></TR>

<TR>

<TD>1)</TD>

<TD>Amount of the loan (any currency):</TD>

<TD><INPUT TYPE=text NAME=principal SIZE=12 onChange="calculate()"></TD>

</TR>

<TR>

<TD>2)</TD>

<TD>Annual percentage rate of interest:</TD>

<TD><INPUT TYPE=text NAME=interest SIZE=12 onChange="calculate()"></TD>

</TR>

<TR>

<TD>3)</TD>

<TD>Repayment period in years:</TD>

<TD><INPUT TYPE=text NAME=years SIZE=12 onChange="calculate()"></TD>

</TR>

<TR><TD COLSPAN=3>

<BIG><B>

<INPUT TYPE=button VALUE="Compute" onClick="calculate()">

</B></BIG>

</TD></TR>

<TR><TD COLSPAN=3>

<BIG><B>

Payment Information:

</B></BIG>

</TD></TR>

<TR>

<TD>4)</TD>

<TD>Your monthly payment will be:</TD>

<TD><INPUT TYPE=text NAME=payment SIZE=12></TD>

</TR>

<TR>

<TD>5)</TD>

<TD>Your total payment will be:</TD>

<TD><INPUT TYPE=text NAME=total SIZE=12></TD>

</TR>

<TR>

<TD>6)</TD>

<TD>Your total interest payments will be:</TD>

<TD><INPUT TYPE=text NAME=totalinterest SIZE=12></TD>

</TR>

</TABLE>

</FORM>

<!--

This is the JavaScript program that makes the example work. Note that

this script defines the calculate() function called by the event

handlers in the form.

-->

<SCRIPT LANGUAGE="JavaScript">

function calculate() {

// Get the user's input from the form. Assume it is all valid.

// Convert interest from a percentage to a decimal, and convert from

// an annual rate to a monthly rate. Convert payment period in years

// to the number of monthly payments.

var principal = document.loandata.principal.value;

var interest = document.loandata.interest.value / 100 / 12;

var payments = document.loandata.years.value * 12;

// Now compute the monthly payment figure, using esoteric math.

var x = Math.pow(1 + interest, payments);

var monthly = (principal*x*interest)/(x-1);

// Check that the result is a finite number. If so, display the results

if (!isNaN(monthly) &&

(monthly != Number.POSITIVE_INFINITY) &&

(monthly != Number.NEGATIVE_INFINITY)) {

document.loandata.payment.value = round(monthly);

document.loandata.total.value = round(monthly * payments)

document.loandata.totalinterest.value =

round((monthly * payments) - principal);

}

// Otherwise, the user's input was probably invalid, so don't

// display anything.

else {

document.loandata.payment.value = "";

document.loandata.total.value = "";

document.loandata.totalinterest.value = "";

}

}

// This simple method rounds a number to two decimal places.

function round(x) {

return Math.round(x*100)/100;

}

</SCRIPT>

---

Select and "copy" the above code down to but not including the above separator. Save the selected code to your PC, in some handy place where you may keep utility programs. Use any name you like, perhaps something suggestive such as "LoanPayment-Calculator-dot-htm".

Note that Windows may require the "dot-htm" part of the name actually to be ".htm" or ".html" to make the double-click action work properly. Also, one general method to save the code would be to call up Notepad (supplied with Windows). Paste the copied code into an empty Notepad instance; and then use Notepad to save the copied code.

After that, double-clicking on your new .htm file will bring up a browser screen which looks like this:

Fill in query boxes 1, 2, and 3. Click on the "Compute" button, and this "one-page-app" fills in boxes 4, 5, and 6, with good amounts rounded to dollars and cents.

Herewith, I declare this code, authored by my own hand, to be public domain. Enjoy.