element121/compoundMonthly.html

## compoundMonthly.html
<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta charset="UTF-8" />
</head>

<body>
    <label for="investYears">Investment term</label>
    <select id="investYears">
        <option value='1'>1 year</option>
        <option value='2'>2 years</option>
        <option selected value='3'>3 years</option>
        <option value='4'>4 years</option>
        <option value='5'>5 years</option>
        <option value='10'>10 years</option>
    </select>
    <label for="investAmount">Initial investment</label>
    <select id="investAmount">
        <option value='1000'>&pound;1,000</option>
        <option value='2000'>&pound;2,000</option>
        <option value='3000'>&pound;3,000</option>
        <option value='4000'>&pound;4,000</option>
        <option value='5000'>&pound;5,000</option>
        <option value='6000'>&pound;6,000</option>
        <option value='7000'>&pound;7,000</option>
        <option value='8000'>&pound;8,000</option>
        <option value='9000'>&pound;9,000</option>
        <option selected value='10000'>&pound;10,000</option>
        <option value='25000'>&pound;25,000</option>
        <option value='50000'>&pound;50,000</option>
        <option value='100000'>&pound;100,000</option>
    </select>
    <label for="investInterest">Monthly growth</label>
    <select id="investInterest">
        <option value='1.05'>5%</option>
        <option value='1.1'>10%</option>
        <option value='1.15'>15%</option>
        <option selected value='1.2'>20%</option>
        <option value='1.25'>25%</option>
    </select>
    <button onclick="fnCalc()">Calculate compounded growth</button>
    <div id='calcResults'></div>
    <script>

        function fnCalc() {

            var investment = parseInt(document.getElementById('investAmount').value);
            var monthlyRate = parseFloat(document.getElementById('investInterest').value);
            var years = parseInt(document.getElementById('investYears').value);

            var months = years * 12;

            var futureValue = investment;
            var myHTML = "";
            var myChartData = [];

            console.log(monthlyRate);

            myHTML = '<table style="cell-padding: 5px;">';
            myHTML += '<tr><th>Month</th><th style="text-align:right;">Value</th></tr>';
            myHTML += '<tr><td>1</td><td style="text-align:right;">&pound;' +
                Number(parseFloat(futureValue)).toLocaleString('en') + '</td></tr>';

            // Chart points
            var item = {};
            item["y"] = futureValue;
            item["label"] = (1);
            myChartData.push(item);

            for (let index = 0; index < months - 1; index++) {

                // grow by the monthly rate
                futureValue = (futureValue * monthlyRate);
                // Keep it to 0 decimal places
                futureValue = futureValue.toFixed(0);
                // Output
                myHTML += '<tr><td>' + (index + 2) + '</td><td style="text-align:right;">&pound;' +
                    Number(futureValue).toLocaleString('en') + '</td></tr>';

                    // Chart points
                    var item = {};
                    item["y"] = parseInt(futureValue);
                    item["label"] = (index + 2);
                    myChartData.push(item);
            }
            myHTML += '</table>';

            document.getElementById('calcResults').innerHTML = myHTML;

            var chart = new CanvasJS.Chart("chartContainer", {
                animationEnabled: true,
                theme: "light2", // "light1", "light2", "dark1", "dark2"
                title: {
                    text: "Compounding growth"
                },
                axisY: {
                    title: "Value £"
                },
                data: [{
                    type: "column",
                    showInLegend: true,
                    legendMarkerColor: "grey",
                    legendText: "Month",
                    dataPoints: myChartData
                }]
            });
            chart.render();
        }

        window.onload = function () {
            fnCalc();
        }
    </script>
    <div id="chartContainer" style="height: 370px; width: 100%;"></div>
    <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<title></title>
	<meta charset="UTF-8" />
	</head>

	<body>
	<label for="investYears">Investment term</label>
	<select id="investYears">
	<option value='1'>1 year</option>
	<option value='2'>2 years</option>
	<option selected value='3'>3 years</option>
	<option value='4'>4 years</option>
	<option value='5'>5 years</option>
	<option value='10'>10 years</option>
	</select>
	<label for="investAmount">Initial investment</label>
	<select id="investAmount">
	<option value='1000'>£1,000</option>
	<option value='2000'>£2,000</option>
	<option value='3000'>£3,000</option>
	<option value='4000'>£4,000</option>
	<option value='5000'>£5,000</option>
	<option value='6000'>£6,000</option>
	<option value='7000'>£7,000</option>
	<option value='8000'>£8,000</option>
	<option value='9000'>£9,000</option>
	<option selected value='10000'>£10,000</option>
	<option value='25000'>£25,000</option>
	<option value='50000'>£50,000</option>
	<option value='100000'>£100,000</option>
	</select>
	<label for="investInterest">Monthly growth</label>
	<select id="investInterest">
	<option value='1.05'>5%</option>
	<option value='1.1'>10%</option>
	<option value='1.15'>15%</option>
	<option selected value='1.2'>20%</option>
	<option value='1.25'>25%</option>
	</select>
	<button onclick="fnCalc()">Calculate compounded growth</button>
	<div id='calcResults'></div>
	<script>

	function fnCalc() {

	var investment = parseInt(document.getElementById('investAmount').value);
	var monthlyRate = parseFloat(document.getElementById('investInterest').value);
	var years = parseInt(document.getElementById('investYears').value);

	var months = years * 12;

	var futureValue = investment;
	var myHTML = "";
	var myChartData = [];

	console.log(monthlyRate);

	myHTML = '<table style="cell-padding: 5px;">';
	myHTML += '<tr><th>Month</th><th style="text-align:right;">Value</th></tr>';
	myHTML += '<tr><td>1</td><td style="text-align:right;">£' +
	Number(parseFloat(futureValue)).toLocaleString('en') + '</td></tr>';

	// Chart points
	var item = {};
	item["y"] = futureValue;
	item["label"] = (1);
	myChartData.push(item);

	for (let index = 0; index < months - 1; index++) {

	// grow by the monthly rate
	futureValue = (futureValue * monthlyRate);
	// Keep it to 0 decimal places
	futureValue = futureValue.toFixed(0);
	// Output
	myHTML += '<tr><td>' + (index + 2) + '</td><td style="text-align:right;">£' +
	Number(futureValue).toLocaleString('en') + '</td></tr>';

	// Chart points
	var item = {};
	item["y"] = parseInt(futureValue);
	item["label"] = (index + 2);
	myChartData.push(item);
	}
	myHTML += '</table>';

	document.getElementById('calcResults').innerHTML = myHTML;

	var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	theme: "light2", // "light1", "light2", "dark1", "dark2"
	title: {
	text: "Compounding growth"
	},
	axisY: {
	title: "Value £"
	},
	data: [{
	type: "column",
	showInLegend: true,
	legendMarkerColor: "grey",
	legendText: "Month",
	dataPoints: myChartData
	}]
	});
	chart.render();
	}

	window.onload = function () {
	fnCalc();
	}
	</script>
	<div id="chartContainer" style="height: 370px; width: 100%;"></div>
	<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
	</body>

	</html>