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.
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:
This program follows the same structure that we saw in previous programs:
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.
Use the formulas below:
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.
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.
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.
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:
Here are some errors that you should look for...
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:
There are two places where you should check for errors:
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:
Once your program is "idiot proof", upload the version with error handling as Part 2
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.