Finished Tutorial Assignment

.gitignore

@@ -1 +1,63 @@
-.idea
+.idea
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# files from VS Code
+.vscode/

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,32 @@
-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;
-};
+// THIS WHOLE SET UP IS IN ORDER TO USE ECMAScript 6
+// Set up includes babel, http, node, etc
+import Mortgage from './mortgage2';
 
-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 = (mortgage.rate * 100).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,27 @@
+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; 
+        let principalY = 0; 
+        for (var m = 0; m < 12; m++) {
+            let interestM = balance * monthlyRate; 
+            let principalM = monthlyPayment - interestM;
+            interestY += interestM;
+            principalY += principalM;
+            balance -= principalM;
+        }
+        amortization.push({principalY, interestY, balance});
+    }
+    return {monthlyPayment, monthlyRate, amortization};
+}

js/mortgage2.js

@@ -0,0 +1,34 @@
+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 += interestM;
+                principalY += principalM;
+                balance -= principalM;
+            }
+            amortization.push({principalY, interestY, balance});
+        }
+        return amortization;
+    }
+}