Valuing a simple ordinary annuity using Javascript

In this post, I will be showing how to write a Javascript software for a valuing a simple ordinary annuity where I assume the payments are constant. Click the following link for the final result:

https://jsfiddle.net/Zerkon/r76y8a1f/6/show

Simple Annuity Calculator
Screen shot of the Simple Ordinary Annuity Calculator

What is an annuity

An Annuity is simple a series of payments over a period of time. The value of an annuity is basically the sum of the present values of each payment. Money has a different value in the future so hence we need to calculate the present value.

I am doing an ordinary annuity which means that the payout is received at the end of the period, this is VERY IMPORTANT as the time the payout is received greatly changes the price. Second I will assume that each payment is constant and the interest rate will be the same throughout the lifespan of the entire annuity.

\frac{c}{(1+r/p)^1} + \frac{c}{(1+r/p)^2} + \frac{c}{(1+r/p)^3} + ... + \frac{c}{(1+r/p)^pt} = \frac{c}{r/p} (1-\frac{1}{(1+r/p)^pt})

Where c is the payment, r is the interest rate, p is the number of periods per year and t is the number of years. From here I will use Javascript for the heavy lifting and html5 for the layout.

Html5

This calculator was coded using Javascript, first things first I created the layout for the calculator using HTML. The code for it is as follows:

</pre>
<h2>Simple Annuity Calculator</h2>
<table style="width:100%">
<tr>
<td width="150px"> Payment Amount
<td>
<input id="payment"></tr>
<tr>
<td> Interest Rate (%)</td>
<td>
<input id="interest"></td>
</tr>
<tr>
<td> Frequency of Payments
<td>
<select id="period">
<option value="annually"> Annually</option>
<option value="semi annually"> Semi Annually</option>
<option value="quarterly"> Quarterly</option>
<option value="monthly"> Monthly</option>
<option value="bimonthly"> Bi Monthly </option>
<option value="weekly"> Weekly </option>
</select></tr>
<tr>
<td> Number of Years
<td>
<input id="years"></tr>
<tr>
<td></td>
<td>
<button type="button" onclick="myFunction()">Submit</button></td>
</tr>
</table>
<p id="demo"></p>

<pre>

Javascript

Now that we have this code finished, I’m getting towards the heavy lifting of the program. This part is written in Javascript.

I will again be using the function from before:

\frac{c}{r/p} (1-\frac{1}{(1+r/p)^pt})

The program will take the Interest, Payment and Years as input from the user and then allows the user to choose how often the annuity will pay.


function myFunction() {
var text;
    var value = 0.0;
    // gets the values from the inputs
    var Payment = document.getElementById("payment").value;
    var Interest = document.getElementById("interest").value;
    var Years = document.getElementById("years").value;
    var period = document.getElementById("period").value;
    var lifespan = 1;

//lifespan variable is the frequency of payments per year
    if (period == "annually") lifespan = 1;
    if (period == "semi annually") lifespan = 2;
    if (period == "quarterly") lifespan = 4;
    if (period == "monthly") lifespan = 12;
    if (period == "bimonthly") lifespan = 24;
    if (period == "weekly") lifespan = 52;
// checks to see if these values are numbers
    if (isNaN(Payment) || isNaN(Interest) || isNaN(Years)) {
        text = "Input not valid";
    }
    else {
        //calculates the present value of the annuity
        var temp = Interest / (100*lifespan);
        var temp2 = Math.pow((1 + temp), (lifespan * Years));
        value = Payment * (1 - 1 / temp2) / (temp);
//grammatical cases for the output of the function
        if(lifespan == 1 && Years == 1) text = "The Annuity pays $" + Payment + ", once per year for one year, is worth $" + value.toFixed(3);
        else if(lifespan == 1) text = "The Annuity pays $" + Payment + ", once per year for " + Years + " years, is worth $" + value.toFixed(3);
        else if(Years == 1) text = "The Annuity pays $" + Payment + ", " + lifespan + " times per year for one year, is worth $" + value.toFixed(3);
        else text = "The Annuity pays $" + Payment + ", " + lifespan + " times per year for " + Years + " years, is worth $" + value.toFixed(3);
    }
    //outputs either an error message or the value of the annuity
    document.getElementById("demo").innerHTML = text;
}

Thank you for reading my article, if you found it useful please like and share and if you have any questions please feel free to leave them in the comments – I may use your question for a further post.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s