es6

index.html

@@ -29,6 +29,8 @@ <h1>Mortgage Calculator</h1>
         </div>
     </div>
     <h2>Monthly Payment: <span id="monthlyPayment" class="currency"></span></h2>
+    <h3>Monthly Rate: <span id="monthlyRate"></span></h3>
+
 </div>
 <script src="js/main.js"></script>
 </body>

js/main.js

@@ -1,15 +1,29 @@
-var calculateMonthlyPayment = function (principal, years, rate) {
-    if (rate) {
-        var monthlyRate = rate / 100 / 12;
-    }
-    var monthlyPayment = principal * monthlyRate / (1 - (Math.pow(1 / (1 + monthlyRate), years * 12)));
-    return monthlyPayment;
-};
-
-document.getElementById('calcBtn').addEventListener('click', function () {
-    var principal = document.getElementById("principal").value;
-    var years = document.getElementById("years").value;
-    var rate = document.getElementById("rate").value;
-    var monthlyPayment = calculateMonthlyPayment(principal, years, rate);
-    document.getElementById("monthlyPayment").innerHTML = monthlyPayment.toFixed(2);
+import Mortgage from './mortgage2';
+document.getElementById('calcBtn').addEventListener('click', () => {
+    let principal = document.getElementById("principal").value;
+    let years = document.getElementById("years").value;
+    let rate = document.getElementById("rate").value;
+    let mortgage = new Mortgage(principal, years, rate);
+    document.getElementById("monthlyPayment").innerHTML = mortgage.monthlyPayment.toFixed(2);
+    document.getElementById("monthlyRate").innerHTML = (rate / 12).toFixed(2);
+    let html = "";
+    mortgage.amortization.forEach((year, index) => html += `
+        <tr>
+            <td>${index + 1}</td>
+            <td class="currency">${Math.round(year.principalY)}</td>
+            <td class="stretch">
+                <div class="flex">
+                    <div class="bar principal"
+                         style="flex:${year.principalY};-webkit-flex:${year.principalY}">
+                    </div>
+                    <div class="bar interest"
+                         style="flex:${year.interestY};-webkit-flex:${year.interestY}">
+                    </div>
+                </div>
+            </td>
+            <td class="currency left">${Math.round(year.interestY)}</td>
+            <td class="currency">${Math.round(year.balance)}</td>
+        </tr>
+    `);
+    document.getElementById("amortization").innerHTML = html;
 });

mortgage.js

@@ -0,0 +1,28 @@
+export let calculateMonthlyPayment = (principal, years, rate) => {
+    let monthlyRate = 0;
+    if (rate) {
+        monthlyRate = rate / 100 / 12;
+    }
+    let monthlyPayment = principal * monthlyRate / (1 - (Math.pow(1/(1 + monthlyRate),
+            years * 12)));
+    return {principal, years, rate, monthlyPayment, monthlyRate};
+};
+
+export let calculateAmortization = (principal, years, rate) => {
+    let {monthlyRate, monthlyPayment} = calculateMonthlyPayment(principal, years, rate);
+    let balance = principal;
+    let amortization = [];
+    for (let y=0; y<years; y++) {
+        let interestY = 0;  //Interest payment for year y
+        let principalY = 0; //Principal payment for year y
+        for (let m=0; m<12; m++) {
+            let interestM = balance * monthlyRate;       //Interest payment for month m
+            let principalM = monthlyPayment - interestM; //Principal payment for month m
+            interestY = interestY + interestM;
+            principalY = principalY + principalM;
+            balance = balance - principalM;
+        }
+        amortization.push({principalY, interestY, balance});
+    }
+    return {monthlyPayment, monthlyRate, amortization};
+};

mortgage2.js

@@ -0,0 +1,35 @@
+export default class Mortgage {
+
+    constructor(principal, years, rate) {
+        this.principal = principal;
+        this.years = years;
+        this.rate = rate;
+    }
+
+    get monthlyPayment() {
+        let monthlyRate = this.rate / 100 / 12;
+        return this.principal * monthlyRate / (1 - (Math.pow(1/(1 + monthlyRate),
+                this.years * 12)));
+    }
+
+    get amortization() {
+        let monthlyPayment = this.monthlyPayment;
+        let monthlyRate = this.rate / 100 / 12;
+        let balance = this.principal;
+        let amortization = [];
+        for (let y=0; y<this.years; y++) {
+            let interestY = 0;
+            let principalY = 0;
+            for (let m=0; m<12; m++) {
+                let interestM = balance * monthlyRate;
+                let principalM = monthlyPayment - interestM;
+                interestY = interestY + interestM;
+                principalY = principalY + principalM;
+                balance = balance - principalM;
+            }
+            amortization.push({principalY, interestY, balance});
+        }
+        return amortization;
+    }
+
+}

rate-service-mock.js

@@ -0,0 +1,19 @@
+let rates = [
+    {
+        "name": "30 years fixed",
+        "rate": "13",
+        "years": "30"
+    },
+    {
+        "name": "20 years fixed",
+        "rate": "2.8",
+        "years": "20"
+    }
+];
+export let findAll = () => new Promise((resolve, reject) => {
+    if (rates) {
+        resolve(rates);
+    } else {
+        reject("No rates");
+    }
+});

ratefinder.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+</head>
+<body>
+    <table id="rates"></table>
+    <script src="build/ratefinder.bundle.js"></script>
+</body>
+</html>

ratefinder.js

@@ -0,0 +1,9 @@
+import * as service from './rate-service-mock';
+
+service.findAll()
+    .then(rates => {
+        let html = '';
+        rates.forEach(rate => html += `<tr><td>${rate.name}</td><td>${rate.years}</td><td>${rate.rate}%</td></tr>`);
+        document.getElementById("rates").innerHTML = html;
+    })
+    .catch(e => console.log(e));

webpack.config.js

@@ -0,0 +1,28 @@
+var path = require('path');
+ var webpack = require('webpack');
+
+ module.exports = {
+     entry: {
+    app: './js/main.js',
+    ratefinder: './js/ratefinder.js'
+},
+output: {
+    path: path.resolve(__dirname, 'build'),
+    filename: '[name].bundle.js'
+},
+     module: {
+         loaders: [
+             {
+                 test: /\.js$/,
+                 loader: 'babel-loader',
+                 query: {
+                     presets: ['es2015']
+                 }
+             }
+         ]
+     },
+     stats: {
+         colors: true
+     },
+     devtool: 'source-map'
+ };