APR or Flat Rate Loan Repayment Calculator

This calculator provides a method of comparing compound and flat rates of interest. Flat rates of interest are often used in illustrations because they appear lower than the APR but are in actual fact more expensive. For example, an APR of 7.8% represents a better value than a flat rate of 5%. Includes comments.

We have tested the code in IE 7.0, Firefox 2.0.0.7, Opera 9.23, Netscape 9.0RC1, Netscape 8.1.3, AOL Explorer 1.5 and Safari 3.0.2. This script worked well in all platforms with no variations observed.

Depending on your knowledge of HTML and javascripts, this is an easy four (4) part copy and paste code that goes in both the <HEAD> (2 parts) and <BODY> (2 parts) sections of your document. It also makes use of an external .js script you need to save and upload into your directory then add a snipplet of code into the <HEAD> section to call the external.js file.

Since this effect has numerous steps, we will take them one by one starting with the CSS section that goes in the <HEAD> section of your document.

Step One Is to paste a section of code into the CSS section (<HEAD> section) with Minimal if any reconfigurations. If you do not have a CSS section, this is not a problem. You just need to add the opening and closing CSS style sheet tags around this part of the code. See below on where and howto:

Reconfigurations For CSS File

#calculator {
width: 410px;
}

#calculator label {
display: block;
margin-top: 0.8em;
}

#result strong {
display: block;
}

As you can notice in the above the only reconfiguration you can really make is for the width of the effect itself. Just play around with it until it fits your needs.

If you would prefer to have the CSS section called from an external file, this is not a problem. Just copy and paste the css section (No opening or closing tags) into a notepad, save as loanCalculator.css, upload it into your directory and now add a snipplet of code into the <HEAD> section of your document to call this file. In all actuality, it is the very same way you would do an external.js file except the file extension is .css and the code to call this file is slightly different. See below:

Saved .css File

The above is how the file will appear once you have saved as. Click on it to see how the file appears in a notepad. You will notice the lack of opening and closing Css tags.

Snipplet of Code for external .css file

<link rel="stylesheet" type="text/css" href="loanCalculator.css">

You may have to change the above "relative"* path depending where you have uploaded your external .css file. We have ours in a css directory so.... ours would look like the below

<link rel="stylesheet" type="text/css" href="css/loanCalculator.css">

* If you do not understand or need a little refresher on the difference between a Relative and Absolute" path, grab the below link and you are there.
[ Relative vs. Absolute ]

If you would like to see this effect with the use of an external .css file, grab the below link and you are there.
[ With External .CSS File ]

Step Two: makes use of an external .js file you need to save and upload into your directory then add a snipplet of code into the <HEAD> section of your document to call the external.js file.

Snipplet Of Code

<script type="text/javascript" src="aprFlatRate.js">
</script>

Note Of Importance: If you are not sure of howto make the external .js file and make use of it within your document, grab the below link and it is fully explained.
[ .js File Howto ]

For your Information: If you are not comfortable or prefer not to use the external.js file, you can use the traditional cut/copy and paste instead of the external .js file. If you need a little refresher on what is required to achieve this, grab the below link and it is fully explained.
[ Traditional Cut/Copy and Paste ]

Depending on which of the above methods you have selected (external.js file or Traditional Copy/Cut & Paste), you will add either the snipplet of code (after you have uploaded the external.js file) into the <HEAD> section or the completed section of code that you added the opening and closing script tags.

Snipplet Of Code
<script type="text/javascript" src="loanCalculator.js">
</script> Traditional Copy/Cut and Paste
<SCRIPT LANGUAGE="JavaScript">

<HEAD> Section of code goes here

// End -->
</script>

External .js file

Traditional Copy/Cut & Paste Code with opening & closing tags that you had to add into the <HEAD> section of code that was originally earmarked to be an external .js file.

Step Three: Once you have completed either of the above steps for the <HEAD> section, all that is left is to paste the <BODY> section of code where you want the effect to appear.

If you would like to see an example of this effect using the "Traditional Cut/Copy & Paste" method, grab the below link and you are there. Examine our "Source" code (on the page you will be opening) to see how we had to reconfigure it to make it work. We have it very well documented for your convenience.
[ Traditional Cut/Copy & Paste Method ]

Note Of Importance: On the page you are going to have this effect on or any page that will link to the page with this effect, be sure of one thing within either the linking URL or the URL this effect is on. Do Not have the backslash-forward slash / (whichever you call it) at the end of the URL or linked to URL. If you do, the effect Will Not Work!. If this sounds confusing, see the below example:

Right Way: https://www.angelfire.com/ny5/consigliere/loancalculator.html
Wrong Way: https://www.angelfire.com/ny5/consigliere/loancalculator.html/

S elect the links above to see what we are explaining about the Right and Wrong URL address.

If you notice on our example the calculations appear to the right of the calculator. On the default that you will get from the script site, the calculations appear underneath. We opted not to have everything move below the calculator to make room for the answers by placing the <BODY> section of the effect inside side-by-side tables. If this is a little unclear on where and howto achieve this, see the below.

<BODY> Section Set Within Tables

<table border="0"cellpadding="4" cellspacing="3">
<tr>
<td valign="top" align="left">

<div id="calculator">

And Everything In Between

</form>
</div>

</td>
<td valign="top" align="left" width="290">


<div id="result"></div>

</td></tr>
</table>


Reconfigured Calulator In Tables

As you can notice in the code to the left, everything color coded is positioned within two side-by-side tables.


Default Loan Calculator

The calculator itself is transparent so it will take on the color of the page it is on. Keep this in mind for the text color of the effect and the calculations. This is defined by the color set within the <BODY> tag.

We hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ] [ Rate This Page ] [ Scripts In Conflict ]