CUNYTechPrep · sushmahadeo · Sep 8, 2017 · Sep 8, 2017 · Sep 8, 2017
diff --git a/index.html b/index.html
@@ -6,6 +6,7 @@
     <link href="css/styles.css" rel="stylesheet" type="text/css">
 </head>
 <body>
+
 <header>
     <h1>Mortgage Calculator</h1>
 </header>
@@ -29,7 +30,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>
+    <table id = "amortization"> </table>
 </div>
-<script src="js/main.js"></script>
+<script src= "build/main.bundle.js" > </script>
 </body>
-</html>
+</html>
diff --git a/js/main.js b/js/main.js
@@ -1,15 +1,53 @@
-var calculateMonthlyPayment = function (principal, years, rate) {
-    if (rate) {
-        var monthlyRate = rate / 100 / 12;
+import Mortgage from './mortgage2';
+
+    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;
     }
-    var monthlyPayment = principal * monthlyRate / (1 - (Math.pow(1 / (1 + monthlyRate), years * 12)));
-    return monthlyPayment;
-};
+
+}
+
+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;
+});
 
-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);
-});
diff --git a/js/mortgage2.js b/js/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;
+    }
+
+}
diff --git a/js/rate-service-mock.js b/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");
+    }
+});
diff --git a/mortgage.js b/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};
+};
diff --git a/npm-debug.log b/npm-debug.log
@@ -0,0 +1,48 @@
+0 info it worked if it ends with ok
+1 verbose cli [ '/Users/sushma/.nvm/versions/node/v6.11.0/bin/node',
+1 verbose cli   '/Users/sushma/.nvm/versions/node/v6.11.0/bin/npm',
+1 verbose cli   'run',
+1 verbose cli   'webpack' ]
+2 info using npm@3.10.10
+3 info using node@v6.11.0
+4 verbose run-script [ 'prewebpack', 'webpack', 'postwebpack' ]
+5 info lifecycle es6-tutorial-master@1.0.0~prewebpack: es6-tutorial-master@1.0.0
+6 silly lifecycle es6-tutorial-master@1.0.0~prewebpack: no script for prewebpack, continuing
+7 info lifecycle es6-tutorial-master@1.0.0~webpack: es6-tutorial-master@1.0.0
+8 verbose lifecycle es6-tutorial-master@1.0.0~webpack: unsafe-perm in lifecycle true
+9 verbose lifecycle es6-tutorial-master@1.0.0~webpack: PATH: /Users/sushma/.nvm/versions/node/v6.11.0/lib/node_modules/npm/bin/node-gyp-bin:/Users/sushma/Downloads/es6-tutorial-master/node_modules/.bin:/Users/sushma/.nvm/versions/node/v6.11.0/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin
+10 verbose lifecycle es6-tutorial-master@1.0.0~webpack: CWD: /Users/sushma/Downloads/es6-tutorial-master
+11 silly lifecycle es6-tutorial-master@1.0.0~webpack: Args: [ '-c', 'webpack' ]
+12 silly lifecycle es6-tutorial-master@1.0.0~webpack: Returned: code: 2  signal: null
+13 info lifecycle es6-tutorial-master@1.0.0~webpack: Failed to exec webpack script
+14 verbose stack Error: es6-tutorial-master@1.0.0 webpack: `webpack`
+14 verbose stack Exit status 2
+14 verbose stack     at EventEmitter.<anonymous> (/Users/sushma/.nvm/versions/node/v6.11.0/lib/node_modules/npm/lib/utils/lifecycle.js:255:16)
+14 verbose stack     at emitTwo (events.js:106:13)
+14 verbose stack     at EventEmitter.emit (events.js:191:7)
+14 verbose stack     at ChildProcess.<anonymous> (/Users/sushma/.nvm/versions/node/v6.11.0/lib/node_modules/npm/lib/utils/spawn.js:40:14)
+14 verbose stack     at emitTwo (events.js:106:13)
+14 verbose stack     at ChildProcess.emit (events.js:191:7)
+14 verbose stack     at maybeClose (internal/child_process.js:891:16)
+14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
+15 verbose pkgid es6-tutorial-master@1.0.0
+16 verbose cwd /Users/sushma/Downloads/es6-tutorial-master
+17 error Darwin 16.7.0
+18 error argv "/Users/sushma/.nvm/versions/node/v6.11.0/bin/node" "/Users/sushma/.nvm/versions/node/v6.11.0/bin/npm" "run" "webpack"
+19 error node v6.11.0
+20 error npm  v3.10.10
+21 error code ELIFECYCLE
+22 error es6-tutorial-master@1.0.0 webpack: `webpack`
+22 error Exit status 2
+23 error Failed at the es6-tutorial-master@1.0.0 webpack script 'webpack'.
+23 error Make sure you have the latest version of node.js and npm installed.
+23 error If you do, this is most likely a problem with the es6-tutorial-master package,
+23 error not with npm itself.
+23 error Tell the author that this fails on your system:
+23 error     webpack
+23 error You can get information on how to open an issue for this project with:
+23 error     npm bugs es6-tutorial-master
+23 error Or if that isn't available, you can get their info via:
+23 error     npm owner ls es6-tutorial-master
+23 error There is likely additional logging output above.
+24 verbose exit [ 1, true ]
diff --git a/package.json b/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "es6-tutorial-master",
+  "version": "1.0.0",
+  "description": "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"
+  },
+  "author": "",
+  "license": "ISC",
+  "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"
+  }
+}
diff --git a/ratefinder.html b/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>
diff --git a/ratefinder.js b/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));
diff --git a/webpack.config.js b/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'
+ };