Assignment 4

Compound Interest

by Ebony McCoy

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/7.2.0/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<form>
   <center><h2>Assignment 4 - Compound Interest Calculator</h2></center>
        <center>FV = PV(1 + r)<sup>n</sup></center>
        
        <center><p>FV = Future Value of the investment.</p></center><br><br/>
        <div id="compoundMessage" style="display:none;"></div>
        
        
           <center>Present Value(PV) <input type="text" id="pv" size="5" /></center> <br><br/>
           <center> Interest Rate(r) <input type="text" id="r" size="2" />%</center><br><br/>
            <center>Years(n) <input type="text" id="n" size="4" /></center><br><br/>
        <center><div class="pure-controls">
            <input type="button" value="Calculate" id="calculate" class="pure-button pure-button-primary" />
            <input type="button" value="Plot" id="plot" class="pure-button pure-button-primary" />
        </div></center>
    
    <center><p id="output"></p></center>
</form>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
    $('#calculate').click(function () {
        if (isValid()) {
            calculate();
            displayValues();
        }
    });
    $('#plot').click(function () {
        if (isValid()) {
            calculate();
            plotValues();
        }
    });
});

var pv = 0;
var r = 0;
var n = 0;
var x = new Array();
var y = new Array();
var v = new Array();

function calculateY(pv, r, n) {
    return pv * (Math.pow((1 + r), n));
}

function calculate() {
    pv = Number($('#pv').val());
    r = Number($('#r').val()) / 100;
    var xmin = 0;
    var xmax = Number($('#n').val());
    var i = 0;
    v = [];
    for (xt = xmin; xt <= xmax; xt++) {
        x[i] = xt;
        y[i] = calculateY(pv, r, xt);
        v[i] = [x[i], y[i]];
        i++;
    }
    n = i - 1;
}

function displayValues() {
    var s = "";
    s = "<p>FV = " + pv + " &times; (1 + " + parseFloat(r.toFixed(4)) + ")<sup>" + n + "</sup></p>";
    for (var i = 0; i <= n; i++) {
        s += "Year " + i + " = "  + y[i] + "<br/>";
    }

    output.innerHTML = s;
    location.hash = "#";
    location.hash = "#output";
    history.pushState("", document.title, window.location.pathname);
}

function plotValues() {
    calculate();
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'line',
            marginRight: 130,
            marginBottom: 25
        },
        title: {
            text: 'Compound Interest',
            x: 0 
        },
        xAxis: {
            title: {
                text: 'Years'
            }
        },
        yAxis: {
            title: {
                text: 'Value'
            }
        },
        plotOptions: {
            scatter: {
                marker: {
                    radius: 5,
                    states: {
                        hover: {
                            enabled: true,
                            lineColor: 'rgb(100,100,100)'
                        }
                  ...