A4-Mortgage Calculator

2220


Overview

Develop a web page that contains a mortgage calculator.  Your web page should include input text boxes for the user to enter a number of parameters (size of the loan, number of years, percent yearly interest rate ) and then calculates the size of the payment for each period as well as the total interest paid over the life of the loan.  

There will be a Part 2 of this assignment, so you will turn in two versions: one without error checking and one with error checking.  More details will be provided about Part II below.


Form Details

Use input text boxes for each of the input parameters.

Use a command button labeled "Calculate Payment" to actually perform the calculations.  

Use two disabled input text boxes for displaying the resulting size of the associated payment and the total interest.  To disable a text box set the property readonly to readonly, like readonly="readonly".

 Be sure that the cursor is positioned in the first form field when the web page is opened.

The tabindex property of each control should be set so that the focus moves from field to field in the proper order whenever the Tab key is hit.  

After the results of the calculations have been displayed, use the initial field's focus method to return focus to it..

Your form should look as much as possible like the following:

.


Structure

This program follows the same structure that we saw in previous programs:

  • Declarations
  • Initialization
  • Input
  • Processing 
  • Output

Variables

The following table provides a description of the variables used.  Note that the variable names chosen clearly describe the purpose of the variables.  Be sure to use descriptive variable names in each of your programs.  More details about these variables will be provided in the next section.

Variable Name Purpose

Explanation

loanAmount   

input

amount of loan

percentInterest   

"

percent interest per year

loanDuration   

"

number of years 

paymentsPerYear   

"

number of payments per year

totalPayments   

intermediate

total payments

decIntPerYear   

"

decimal interest per year

decIntPerPayment   

"

decimal interest per payment

factor   

"

intermediate variable

paySize   

output

size of each payment

totalInt   

"

total interest paid


Processing (calculations)

Use the formulas below:

Variable Formula
totalPayments loanDuration multiplied by paymentsPerYear 
decIntPerYear percentInterest divided by 100
decIntPerPayment decIntPerYear divided by paymentsPerYear
factor 1 - (1 + decIntPerPayment)-totalPayments
            decIntPerPayment                   
paySize loanAmount divided by factor
totalInt (paySize * paymentsPerYear  * loanDuration) - loanAmount

In most cases the user knows and will enter the Annual Interest Rate (like 4.9) into the text box named  txtPercentInterestPerYear rather than the decimal interest per payment (like 0.049).  However, you cannot guarantee which format the user will enter, so you need to be able to handle either one.  If the user enters a value less than 1, then multiply that value by 100 and write it back to the form, replacing their original entry. In other words, if the user enters a value like 0.049, replace it with 4.9 on the form and use 4.9 as the percentInterest.  If the user enters an interest rate greater than 1 originally you don't have to modify it.  (Note that if interest rates ever drop below 1% this approach will not work.)

The intermediate variable decIntPerPayment will divide the final value in txtPercentInterestPerYear by 100, resulting in a number between zero and one, not a percentage.

Many students incorrectly translate the formula for factor into JavaScript. The entire top portion of the formula is divided by decIntPerPayment. And (1+decintPerPayment) is raised to the power of –totalPayments.


Results

Remember to test your program by trying all different possible combinations of input. When testing your program, be sure to enter some incorrect data, such as text instead of numbers, decimal percentage rate instead of integer percentage rate, and unfilled fields to witness how the program behaves. 

I can't include a demo because JavaScript cannot be hidden, so here are some sample values to help you verify your numbers:
Loan Amount Interest Percent Loan Duration Payments
per Year
Monthly Payment Total Interest
$100,000 4.9% 15 12 $785.59 $41,406.96
$100,000 4.9% 30 12 $530.73 $91,061.62
$200,000 4.9% 15 12 $1,571.19 $82,813.92
$200,000 4.9% 30 12 $1,061.45 $182,123.24
$500,000 4.9% 15 12 $3,927.97 $207,034.80
$500,000 4.9% 30 12 $2,653.63 $455,308.10
$999,999 6% 15 12 $8,438.56 $518,941.77
$999,999 6% 30 12 $5,995.50 $1,158,380.73


Documentation

Be sure that you code is documented thoroughly.  In all programs you should include a comment block at the beginning or your program with your name, date, the assignment number, and a brief description of the purpose of the program.  Comment blocks should be demarcated with lines before and after the block, as in the sample programs.

Each function should be prefaced by a comment block indicating its purpose.

You should use good variable names, sometimes referred to as self-documenting code.

You should embed comments in your code whenever the purpose of subsequent lines may be unclear to subsequent reviewers. 


Hints

You can right justify an input text box by including the property style="text-align:right" inside the <input> tag.

You can specify that a field is used for output only by including the property readonly inside the <input> tag.

Use the formatCurrency function from the previous program to format your Monthly Payment Amount and Total Interest Paid values.

Strategy:  I recommend first building the interface (the GUI) and then writing the code for the Calculate Payment event.  However, instead of immediately worrying about coding the calculations, first have the button event simply report the values that it read from the text boxes (probably using an alert ).  That way you break the task into three steps:  (1) building the interface, (2) determining if you can handle an event and read user input from the web page, and finally (3) performing the required calculations. 

Be sure to use CSS to style your page and include either the XHTML Transitional or the XHTML Strict DOCTYPE.

Refer to the grading rubric for grading details.


Part 2 - Error Checking

Once you satisfy the above requirements and saved and uploaded your program, experiment with it and see what happens if the user enters incorrect data.  For example, try the following errors:

  • no value is entered
  • an incorrect numeric type is entered
  • text is entered instead of numeric value
  • negative value is entered when positive value is expected
  • 0 value is entered
  • incorrect range of values may be entered

Here are some errors that you should look for...

  • If a user fails to enter a value in a field (i.e., value property is equal to "") but still hits the calculate button, display an alert on the screen asking them to provide the required input and return the focus to the unfilled text box using the highlightField function provided in the notes.   

  • Another error that you should detect is string data rather than numeric data.  For example, if the user enters "Sixty Thousand" into the Loan Amount field you should detect that and force the  user to re-enter the data.

  • Further, a loan amount, percent rate, or loan duration that is negative is also invalid and must be detected. 

  • A non-integer loan duration like 12.65 years is invalid and must be detected.

  • In all fields you should check to be sure that user entries are not unreasonable, like an interest rate less than 0 or greater than 100, or 900 for loan duration.  Is an interest rate like 45% legal? 

Include boolean functions to test that (1) a text field has an entry, (2) another to see if the entry is numeric, (3) another to see if the entry is positive, (4) another to test that the entry is non-zero, and (5) another to test the entry is within the correct range. Add other functions as necessary.

You should handle errors by doing the following:

  • display an alert on the screen asking them to provide the required input, and

  • return the focus to the unfilled text box using the highlightField function provided in the notes.

There are two places where you should check for errors:

  • in user  input, and

  • prior to doing calculations. 

If there is an error in any of the user input you force the user to re-enter the data and you bypass both reading values from the form into variables and performing calculations.  If there is an error in any of the data used in a calculation you react by warning the user and continuing with the calculations if the data is merely questionable, or by using an alternative set of calculations if the data is unusable.  (For example, a zero interest rate causes a divide by 0 error in the factor calculation.)  In this exercise you will only be required to check for errors in user input.

Make a copy of your program so that you don't mess up the version that works, and modify the copy to include error checking of user input. 

Error checking is covered in the class notes.  The list above will give you an idea of what to check. 

I will not specify everything that you should check, but I will make attempts to break your program, so I'd better not think of something that you overlooked!  Here are some that I thought of:

  • Check each field to be sure that a value has been entered.

  • Check each field to be sure that a numeric value has been entered.

  • Check each field to be sure that a negative value has not been entered.

  • Check each field to be certain that an entry is reasonable.

    • Interest rates equating to usury should be prohibited. 

    • An unusual loan duration (less than 1 or greater than 40) should also be prohibited. 

    • Payments per year other than 12 or 26 seem unusual and should probably be prohibited.

  • Decide if you are going to allow a 0 interest rate.  A bank won't offer it to you, but a relative might.  If you want to allow it, ask me how to handle it.

Once your program is "idiot proof", upload the version with error handling as Part 2


Recap

Be sure that you upload two versions of your program: one without error checking and one with error checking.  I'm requiring a two-step process to (a) make your tasks more manageable, and (b) let you see the difference in the number of lines of code when you incorporate error checking.