Loan Repayment Calculator
3. Add to Page
The final step in setting up the repayment amount calculator is to determine where the calculator is to appear in your page and how you want it to look.
Where the calculator is to appear is determined by placing a div tag into your page at the spot where you want the calculator to appear.
The calculator will appear in whatever spot you place that tag in your page provided that your visitor has JavaScript enabled. Depending on how you are using the calculator you can either leave the div empty (as shown) so that those without JavaScript don't see anything at that spot in the page or you can place the alternate content you want thise without JavaScript to see inside the div tag. The content of the div will be replaced by the form for the calculator when the JavaScript you put at the bottom of the page is run.
We determine how the calculator should look the same way we do for everything in our page - by using CSS. The code you need to add to your external stylesheet (or inside a style tag in the head of your page) is as follows:
border:solid #000000 1px;background-color:#ffffcc;}
.tl {float:left;width:156px;text-align:right;padding:3px}
.tx {float:left;width:120px;text-align:left;padding:3px}
.tr {float:right;width:130px;text-align:left;padding:3px}
.tm {text-align:center;clear:both}
#repaye {color:#f00;}
You can change the borders and colours that the form uses so as to make it match your page better by updating those values in the CSS.