Submission for ES6-Tutorial

.gitignore

@@ -1 +1,4 @@
-.idea
+.idea
+
+build/
+node_modules/

index.html

@@ -29,7 +29,9 @@ <h1>Mortgage Calculator</h1>
         </div>
     </div>
     <h2>Monthly Payment: <span id="monthlyPayment" class="currency"></span></h2>
+    <h3>Monthly Rate: <span id="monthlyRate"></span></h3>
+    <h3>Amortization: <span id="amortization"></span></h3>
 </div>
-<script src="js/main.js"></script>
+<script src="build/main.bundle.js"></script>
 </body>
 </html>

js/main.js

@@ -1,15 +1,30 @@
-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;
-};
+import Mortgage from './mortgage';
 
-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);
+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;
 });

js/mortgage.js

@@ -0,0 +1,33 @@
+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;
+    }
+}

js/rate-service-mock.js

@@ -0,0 +1,20 @@
+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");
+    }
+});

js/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));

package.json

@@ -0,0 +1,29 @@
+{
+  "name": "es6-tutorial",
+  "version": "1.0.0",
+  "description": "After reading the notes below, start the tutorial [here](http://ccoenraets.github.io/es6-tutorial).",
+  "main": "index.js",
+  "scripts": {
+    "babel": "babel --presets es2015 js/main.js -o build/main.bundle.js",
+    "start": "http-server",
+    "webpack": "webpack"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ipalongengi/es6-tutorial.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/ipalongengi/es6-tutorial/issues"
+  },
+  "homepage": "https://github.com/ipalongengi/es6-tutorial#readme",
+  "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-preset-es2015": "^6.24.1",
+    "http-server": "^0.10.0",
+    "webpack": "^3.5.6"
+  }
+}

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>

webpack.config.js

@@ -0,0 +1,27 @@
+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'
+};