Create SIP Calculator in Javascript

In this tutorial, you will learn how to create SIP calculator in Javascript. First, you will learn what is SIP then we’ll create a simple javascript program to calculate the SIP, at last, we’ll convert that simple function into a browser-based calculator.

What is SIP:

A systematic Investment Plan (SIP) is a type of investment plan where people invest money at regular intervals into mutual funds. This plan was made for people who don’t have time to invest in the market and want to make a gradual investment.

The SIP is designed for investors who want to make regular and systematic investments into an equity fund without trying to time the market. The investor has the option of investing the same amount every month, fortnight or week.

SIP Formula:
A= I [ (1+R)^M-1 ] * (1+R)/R
Where A: Final value or the amount at maturity.
I = Monthly Installment
R = Rate of interest per month
M = Investment duration in months
For example, if you invest $1000 per month for two years at an annual interest rate of 10%.
Then, I = 1000
Rate of interest per month, R = 10/100/12 or 0.0083
Total Months, M = 12 X 2 = 24
A = 1000 [ (1+0.0083)^24-1 ] * (1+0.0083)/0.0083
A = 26447

Program to calculate SIP in javascript

Let’s convert the above-discussed formula to a simple javascript function. 

function sipCalculator(installment, rate, years) {
    const monthlyRate = rate / 100 / 12;
    const months = years * 12;

    const totalInvested = installment * months;
    let finalValue = installment * (Math.pow(1 + monthlyRate, months) - 1) / monthlyRate;
    finalValue = parseInt(finalValue.toFixed(0));
    const wealthGained = finalValue - totalInvested
    return {totalInvested, finalValue, wealthGained}
}
console.log(sipCalculator(1000, 10, 2));

Result:

{totalInvested: 24000, finalValue: 26447, wealthGained: 2447}

Code Explanation:

  • First, we create a function named ‘sipCalculator’ that takes installment, rate of interest, and years as arguments.
  • Then we calculate the monthly rate of return and the total number of investment months.
  • Then we calculate the final investment value at maturity by using the above-discussed formula, the total amount invested, and total gain and Return them in a javascript object.

Create SIP Calculator in Javascript

Now let’s extend our simple javascript function to an interactive browser-based calculator. For that, we’ll have three number inputs (Installment, Rate of return, Years) and a button. On button click, the final amount, total invested, and total gained will be displayed on the screen. 

<html>
<head>
</head>
<body>
    <input type="number" placeholder="Monthly Installment" id="i">
    <input type="number" placeholder="Rate of interest" id="r">
    <input type="number" placeholder="Number of years" id="y">
    <button id="button">Calculate</button>
    <p id="result"></p>

    <script>
    // Code to Create SIP Calculator in Javascript
    function sipCalculator(installment, rate, years) {
        const monthlyRate = rate / 100 / 12;
        const months = years * 12;

        const totalInvested = installment * months;
        let finalValue = installment * (Math.pow(1 + monthlyRate, months) - 1) / monthlyRate;
        finalValue = parseInt(finalValue.toFixed(0));
        const wealthGained = finalValue - totalInvested
        return {totalInvested, finalValue, wealthGained}
    }

    function render() {
        const installment = document.querySelector("#i").value;
        const rate = document.querySelector("#r").value;
        const years = document.querySelector("#y").value;

        const data = sipCalculator(installment, rate, years);
        const result = `
        Final Value: $${data.finalValue},
        Total Invested: $${data.totalInvested},
        Wealth Gained: $${data.wealthGained}`;
        document.querySelector("#result").innerHTML = result
    }

    document.querySelector("#button").addEventListener("click", render);
    </script>
</body>
</html>

Image output:

Output after creating Create SIP Calculator in Javascript

Code explanation:

  • HTML part: We create the three input fields with relevant IDs and a button with the text ‘Calculate’ and an empty paragraph that will display the result.
  • Javascript part: we create the function named ‘render’ that gets the installment, rate, and years from the input fields and call the ‘sipCalculator’ function to get the result and display it in the paragraph(By using document.querySelector(“#result”).innerHTML). In the end, we connect the ‘Render’ function with our button’s click event.