Javascript

Introduction
This week I worked on Javascript. Although I have done considerable web design work I do not have much experience with Javascript. I have used scripts written by third parties on many occasions where I needed client side scripting. Javascript, being the client side scripting language that it is has always intrigued me and I have always wanted to learn it as I am sure that it will come in handy. The quick introduction given by our tutor was enough to get me going and stir my interest in this topic.

This week's exercise
For this week's work, I started by changing the look of the table through CSS. First of all, rather than having the CSS embedded in the HTML header I decided it would be better to split the CSS into a separate CSS file.

I also tried using JSFiddle and also I appreciate the potential with this application, I decided I would rather use a text editor for this task.

I then proceeded to change the look of the table that is being used to display the form for the Loan Calculator.

The image shows the CSS now located in a separate file called style.css. The preliminary changes can also be seen, namely the addition of padding and an overall background colour for the table. I also wanted to make the table headers a different colour and therefore I added a class that would be used to colour the specific table row where it is used.

The result so far already looks much better with these simple changes.

I then decided to change the fonts used because the default font does not do the new design justice. 

I also wanted to style the button into something more appropriate. This involved creating a class for the button and then creating another class for the button hover. Code is shown below :

I then started working on the Javascript. I spent some time looking through the code and familiarizing myself with the syntax. Experience has shown me that coding is similar in most languages, however the learning curve to learn the syntax of the language can only be made less steep by practice. 

Addind the total number of payments was not difficult as the variable already exists in the code. The variable 'payments' already contains the number of payments. I then had to modify the HTML to include a new table row that displays the result. While I was at it I also added another new row that will contain the result of the "Date when loan ends". 

I then had to add the discount feature. I though that ideally it would not allow only 10% discount but could allow more or less as the user prefers. To start off I decided to start with applying only a fixed rate for 10%. The equation to work out the new interest would be :

New Interest = ((100-Discount%)xOriginalInterest)/100

Of course, for the intents of the assignment the Discount% would be a flat 10% but the equation will also cater for other percentages which I intend to add later.

Firstly, I had to edit the HTML so that the discount checkbox is included and displayed as shown here :

 
I then had to add condition statements to calculate the interest only if the checkbox is checked. The code is shown below:

I then added the code to display if interest was applied to the calculations :

 

The images below show the results after adding the above code. The two images are purposely inlucluded as a test.  As in the first image 10% interest rate is applied and including 10% discount it should display the same result as when 9% interest is applied and in fact it does as shown below.

I then decided that it would be a good idea to have the user specify a percentage discount rather than just apply the fixed 10%. This would of course necessitate the inclusion of another textbox to get the percentage value from the user :

As the equation above had already purposely included the value for the discount percentage, it was not difficult to include the value as a variable in the calculation :

and finally, I added the code so that  the percentage entered by the user is also displayed :

The image above shows the final result after the new features were added.

Validation
Some validation should be included, although due to time constraints I have only attempted to add simple missing field validation. 

 The image above shows the validation function. It is based on a simple example from W3 schools but adapted for this case. The function returns the name of the field to validate that was originally passed to this function. The advantage with this approach is that the form can be used to validate any field in the form and a new function does not have to be written for each field. 

I then had to include calls to this function. My first attempt was to include the call in the form declaration so that when the form is submitted the fields are verified but since the program also calls the calculate() function when a user changes the value of one of the fields then it would be better to include the validation in the calculate() function as shown below.

After some testing I realized that with the calculate() function included with every change of a field, the error message indicating that a field has been left blank will appear every time that a user starts afresh. To solve this issue I decided to remove all the onchange events and leave the calculation only when the user clicks the button.

Conclusion

Javascript is cool ! I have enjoyed experimenting and working on this application and the more I do on it, the more interesting it is, however, due to time constraints I decided to stop here this week !

DEMO

You can view of demo of this week's work here