Discrete compounded interest

by Konrad Bloor

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://worrydream.com/Tangle/TangleKit/mootools.js"></script>
<script src="http://worrydream.com/Tangle/TangleKit/sprintf.js"></script>
<script src="http://worrydream.com/Tangle/TangleKit/BVTouchable.js"></script>
<script src="http://worrydream.com/Tangle/Tangle.js"></script>
<script src="http://worrydream.com/Tangle/TangleKit/TangleKit.js"></script>
<link rel="stylesheet" href="http://worrydream.com/Tangle/TangleKit/TangleKit.css">
<h1>Discrete compounded interest</h1>
<p id="discreteCompounded">Suppose I invest $ <span class="TKAdjustableNumber" data-var="invested" data-min="1" data-max="50000"> </span>
at a discrete rate of <span class="TKAdjustableNumber" data-var="rate" data-min="1" data-max="30">%</span>.
    <br/>
    <br/>At the end of one year my bank account will contain:
    <br/>$<span data-var="invested"> </span> × (1 + <span data-var="actualrate"> </span>) = <span data-var="result" data-format="$%.2f"> </span>

    <br/>
    <br/>After two years I will have:
    <br/>$<span data-var="invested"> </span> × (1 + <span data-var="actualrate"> </span>) × (1 + <span data-var="actualrate"> </span>) = (1 + <span data-var="actualrate"> </span>)<sup>2</sup> = <span data-var="resulttwoyear" data-format="$%.2f"> </span>
    
    <br/>
    <br/>After <span class="TKAdjustableNumber" data-var="years" data-min="1" data-max="1000"> </span> years I will have:
    <br/>(1 + <span data-var="actualrate"> </span>)<sup><span data-var="years"> </span></sup> = <span data-var="resultnyear" data-format="$%.2f"> </span>
</p>

CSS

body {
    font: 12px sans-serif;
}
div.equation {
    text-align: center;
    font-weight: bold;
}

JavaScript

var model = {
    initialize: function () {
        this.invested = 1;
        this.rate = 10;
        this.years = 3;
        this.actualrate = this.rate/100;
    },
    update: function () {
        this.actualrate = this.rate/100;
        this.result = this.invested * (1 + this.actualrate);
        this.resulttwoyear = this.invested * (1 + this.actualrate) * (1 + this.actualrate);
        this.resultnyear = this.invested * Math.pow(1+this.actualrate,this.years);

    }
};
var rootElement = document.getElementById("discreteCompounded");
var tangle = new Tangle(rootElement, model);