Week 2 - HTML, CSS & JavaScript

Introduction

Last week was all about HTML and CSS which create static websites now we want to enhance our sites and make them more dynamic, to get this we learnt some basic JavaScript and continued on with CSS . We were given out source code that shown a basic loan calculator we than had to add styles to it so it will look more interesting and also add some more functions to give out more information. Throughout this post I will be talking about how these things were added to this calculator and about some obstacles that came my way. We were able to use www.jsfiddle.net so it helps us out. You can put HTML CSS and JavaScript in different section and as an output you will be displayed the final result.

Source code

When you are given a piece of code the first thing to do is to analyse this code to see how it works and which part is what and what each input is called. This calculator works by the user inputting some data into the fields then the user clicks compute and he will be displayed the information into the payment information section.

 
CSS

This calculator was a plain white calculator with some functionality. First off I started by making the calculator look more appealing, some CSS Styles were added. I added an outer div surrounding the table and gave it one colour and I gave the table a different colour. I also gave the heading some styles to make it more appealing.

HTML

Then I added a few more input types in the section where the user has to input fields and some more in the information section which will be displayed. We also had to add a checkbox in the enter loan information section which users will thick if they are eligible for discount. After adding these things I had then to make them working by adding their functionality in JavaScript. This was the hardest part of all since I have never seen any JavaScript before and it was quit cheeky to deal with it.

JavaScript

I first started by adding the functionality showing the number of payments done.  To do so I added two variables; one which keeps how long it took to pay the loan (this part is inserted by the user) and the other where it will display the answer. At first it didn’t want to work and I kept getting my answer as 0.00 or NaN, then I realized I had left the .toFixed(2) which kept getting my answer as a decimal point instead of a whole number also I had a mistake in my variable and that was also why I was getting certain results. 

Checkbox:

I continued by making the 10% discount feature, this will reduce the interest rate by 10%. It will work only when the checkbox will be checked, if not the interest will have its normal rate as showing in line 14 if discount.checked = true then perform the discount feature. Another variable for the discount was added and then

Loan End Data:
After those two functions we also had to add the date of when the loan will end. For this feature a new function was added called function getLastDate() {} and new variables were added like var date and var year and then it was displayed in the loan information section. 

Final Result:

 

I found this weeks task a bit difficult since I never touched any JavaScript before but hopefully I will keep on trying and make this loan calculator work to the full and add some flashy features which will make it unique! After all practice makes perfect :)