For our first javascript exercise we worked on a loan calculator, the core functionality of the application was already in place but we were asked to perform the following tasks/modifications on the existing code.
With regards to the HTML I kept most of the original code, I wrapped the whole thing around a couple of <divs> to allow for easier manipulation through CSS and javascript. I also included some additional elements for the required javascript modifications, namely the inclusion of the discount checkbox and two other output fields to display the total number of payments and the loan end date.
As for CSS I mainly made use of direct id selectors to style and position the various elements as explained in the previous blog post.
a. Show total number of payments
To show the total number of payments all we had to do was expose an already existing variable that was used internally in the calculation, in order to prevent fraction number of payment values I used the Math.ceil() javascript function which rounds up any number to the next integer value.
b. Show last payment date
To show the last payment date, I incremented the current date by x number of years, where x is the number of years keyed in by the user, to do this I created a new Date object which is automatically set to the current date, I extracted the year value from the date using the getFullYear() function and incremented this value by x. I then re-assigned this value back to my date object.
c. Show discount checkbox
To implement this feature I made use of the checkbox previously created (mentioned in the HTML/CSS section), I implemented the code in the existing calculate() function and then call this function on the onchange event of the checkbox to keep in line with the current functionality and also provide instant updates whenever the checkbox is toggled. The code check for the checked flag and if checked it overrides the interest value with the discounted one. The script also outputs the discounted interest rate to the user through the discountedLabel <span> next to the interest rate textbox. This label is reset to spaces when the checkbox is not checked.
d. Add a new feature
As a new feature to the loan calculator I created a +/- toggle button on the left side of the calculator’s title-bar.
The code to implement this is pretty straight forward, the toggleApplication() function is called whenever the toggle button (-/+) button is pressed. The function reads the calculator state directly from the button value to determine the state of the calculator. If the value is equal to minus (-) it means that the calculator is maximised and therefore should be minimised, the reverse happens when the value is equal to plus (+). The concept of reading the value directly from the element instead of keeping an internal variable to identify the state of the form keeps the code cleaner as well as ensures that the correct action is always taken as the source is the page itself.
On the whole I think the task turned out ok, I was planning on implementing the drag/drop functionality to allow the user to drag the <divs> around the screen just using the blue title bar, but since we were not allowed to use JavaScript frameworks like jQuery, I would have ended up using a lot of code snippets which would have been out of scope for this exercise.
0 comments:
Post a Comment