In this week’s lecture, javascript have been introduced, where we learned the basics of javascript. During our lab session, the source code found in http://www.davidflanagan.com/javascript5/display.php?n=1-3&f=01/03.html has been given. The tasks which we had to do are the following:

Modify the CSS and HTML to make the table more presentable.
Display the total number of payments
Display the date when loan ends (assuming loan starts today)
Also modify to add a checkbox showing “Eligible for discount” which will reduce the interest rate by 10%.
Add a new feature of your own.

Before I started modifying the code I went through the code line by line. The getElementById method is a method of the document object. It gets the id of the HTML element.

The innerHTML property is used to insert the content of the HTML elements.

To make the table more presentable, the HTML and CSS have been modified.

HTML:

Inserted an <h1> tag named ‘Loan Calculator’
Replaced the <b> tags in ‘Enter Loan Information’ and ‘Payment Information’ into <h2> tags
Divided the table into 2 tables using the <div> tag
A checkbox, a reset button and additional rows have been inserted as well

CSS:

Changed the font type and size of the text
Changed the style and colour of the headings
In order to separate the two tables, a dotted line was created using ‘border-top: 1px dotted’

Javascript:

Total number of payments:

To get the total number of payments, the line of code 'totalmonthpay.innerHTML = payments;' have been used:

Date when loan ends:

To get the loan ending date, the Date Object and functions getDay(), getMonth() and getFullYear() have been used. While I implemented this code, I found out that if the current month is February, number 1 will be displayed instead of 2. This is because the number of month is counted from 0 till 11. Therefore I added one to the month as shown in line 75. Another thing I found out is that when I was adding the variables year with years (line 78), these variables where being concatenated not added. Therefore I used the parseInt function to return that string into an integer, shown in line 73.

Eligible for discount checkbox:

Another feature which we had to create is to add a checkbox showing “Eligible for Discount”, which will reduce the interest rate by 10%. Line 108 shows that if the checkbox will be checked, the statements found in lines 109-116 will be calculated. The discount is (90/100) multiply by the interest. The toFixed(2) method is used to format the values into two decimal places.

Additional Features:

I created two additional features. One of them is that if the amount will be less than €5000, a dialog box with message “loan starts from €5000” will appear. In the other feature I added a reset button which calls the ‘reload()’ function. This was created so that when the user presses the ‘Reset’ button, not only the text fields will be cleared but also the calculated values.

Loan Calculator: