reptile7's JavaScript blog
Thursday, November 19, 2015
Adventures in Amortization, Part 1
Blog Entry #353

Today we'll begin a discussion of "Loan Amount", the next Calendars, Clocks, and Calculators script. Authored by Dave Wedwick in 1998, the Loan Amount script provides an interface for working with amortizing loans, for example, mortgage loans, car loans, student loans, etc.

An amortizing loan has four basic, related parameters:
(1) a principal,
(2) an interest rate,
(3) a period, and
(4) a periodic (usually monthly) payment.
Typically, a lender sets the principal, interest rate, and period, and calculates a monthly payment for the lendee. The Loan Amount script enables the user to set any three of these parameters and calculate the remaining parameter; it can then generate a complete table of payments for the period.

A functioning demo for the Loan Amount script may be accessed here.

The script code and its frameset

The script display is in the form of a two-frame left-right frameset. On the loanamount.html page,
(a) a The frames page. link points to the frameset page,
(b) a Left frame page. link points to the right frame, and
(c) a Right frame page. link points to the left frame.
(Yes, the (b) link should point to the (c) target and vice versa.)
There are no separate pages for the script code, which must be fished out of the frameset/frame source.

Here's the frameset page code from start to finish:

<title>Loan Calculation and Amortization</title>
<frameset rows="100%" cols="250,*">
<frame name="Frame 1" src="calc.htm" scrolling="auto">
<frame name="Frame 2" src="amortize.htm" scrolling="auto">

• Per the frameset's cols attribute, the left frame has a width of 250px and the right frame takes up the rest of the page. Both frames have an effective height of 100%, i.e., they vertically extend to the bottom of the viewport.
• With a cols="250,*" arrangement, the rows="100%" setting is not meaningful and can be removed.
auto is the default value of the scrolling attribute: This value tells the user agent to provide scrolling devices for the frame window when necessary.

In a Non-conforming features section, HTML5 declares that the frame and frameset elements are entirely obsolete, and must not be used by authors. We will unframe the display in due course, but let's go with what we have for the time being.

The left frame


The calc.htm document body largely comprises a name="CalcForm" form, which holds four text inputs, one for each loan parameter. Each text input is preceded by a label (not marked up as such) and is followed by a push button. The form concludes with a separate push button. Each button is linked to a JavaScript function.

<body bgcolor="#ffffff">
<form name="CalcForm">
Loan Amount<br>
<input type="text" name="LoanAmt" size="10">
<input type="button" value="Calculate" onclick="CalcLoanAmt(this.form);">
<input type="text" name="PaymentAmt" size="10">
<input type="button" value="Calculate" onclick="CalcPayment(this.form);">
<input type="button" value="Amortization Table" onclick="ShowAmoritazation(this.form);">
<!-- The last <br> has no effect rendering-wise, at least on my computer. -->

The form is coded and laid out straightforwardly: there are a few validation-related issues here that we could nitpick over but no red flags to speak of.

The left frame concludes with an email link credit:

<a href="">Prepared by Dave Wedwick</a>

I suspect the address is still live as itself is live.


A single <script> element in the calc.htm document head holds all of the script's JavaScript. The JavaScript contains
(a) top-level declarations for LoanAmt, Rate, Period, and Payment variables and
(b) six functions, namely, CalcPayment( ), CalcLoanAmt( ), CalcPeriod( ), CalcRate( ), ValToMoney( ), and ShowAmoritazation( ) (sic), in that order.

In the name of completeness, I should note that the <script> begins with
document.write("<!-- Hide the script -->");

and ends with
document.write("<!-- End hiding the script -->");
The write( ) commands are redundant and can be thrown out; for that matter, we shouldn't need the <!-- and //--> either in this day and age.

The right frame

The amortize.htm document body comprises a big Loan Calculator title

<body bgcolor="#ffffff"><center><br>
<font color="#0000ff" size="+3">Loan Calculator</font>

and two meta-information paragraphs that are oddly marked up as <table> elements, e.g.:

<table width="50%"><tr>
<td bgcolor="#cacaca">This will calculate the amortization table for the parameters to the left. Fill in any three and press <b>Calculate</b> to calculate the fourth value. Click the <b>Amortization Table</b> button to create the amortization table.</td>

The Loan Calculator text is semantically a heading and the size="+3" attribute gives it the size of an <h1> heading, so let's mark it up as an <h1> element, shall we?

h1 { text-align: center; color: blue; }
/* The original <font> text is not bolded - add a font-weight:normal; declaration if you like. */

<h1>Loan Calculator</h1>

As for those paragraphs, we should really code them as <p> elements, yes?
(I don't like the grayish #cacaca background color so I'm changing it to #ccffcc.)

p { width: 50%; margin-left: auto; margin-right: auto; background-color: #ccffcc; }

<p>This will calculate the amortization table ...</p>

We'll start going through the script's JavaScript via an example in the following entry.

Comments: Post a Comment

<< Home

Powered by Blogger

Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)