Using arrow functions and setting up webpack

build/main.bundle.js

@@ -1,4 +1,77 @@
-'use strict';
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+/******/
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// identity function for calling harmony imports with the correct context
+/******/ 	__webpack_require__.i = function(value) { return value; };
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, {
+/******/ 				configurable: false,
+/******/ 				enumerable: true,
+/******/ 				get: getter
+/******/ 			});
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
 
 var calculateMonthlyPayment = function calculateMonthlyPayment(principal, years, rate) {
     var monthlyRate = 0;
@@ -15,16 +88,45 @@ var calculateMonthlyPayment = function calculateMonthlyPayment(principal, years,
     //      monthlyPayment: monthlyPayment,
     //      monthlyRate: monthlyRate };
 };
+var calculateAmortization = function calculateAmortization(principal, years, rate) {
+    var _calculateMonthlyPaym = calculateMonthlyPayment(principal, years, rate),
+        monthlyRate = _calculateMonthlyPaym.monthlyRate,
+        monthlyPayment = _calculateMonthlyPaym.monthlyPayment;
+
+    var balance = principal;
+    var amortization = [];
+    for (var y = 0; y < years; y++) {
+        var interestY = 0; // Interest payment for year y
+        var principalY = 0; // principal payment for year y
+        for (var m = 0; m < 12; m++) {
+            var interestM = balance * monthlyRate; // Interest payment for month m
+            var principalM = monthlyPayment - interestM; //principal payment for month m
+            interestY = interestY + interestM;
+            principalY = principalY + principalM;
+            balance = balance - principalM;
+        }
+        amortization.push({ principalY: principalY, interestY: interestY, balance: balance });
+    }
+    return { monthlyPayment: monthlyPayment, monthlyRate: monthlyRate, amortization: amortization };
+};
 
 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 _calculateMonthlyPaym = calculateMonthlyPayment(principal, years, rate),
+    var _calculateAmortizatio = calculateAmortization(principal, years, rate),
-        monthlyPayment = _calculateMonthlyPaym.monthlyPayment,
+        monthlyPayment = _calculateAmortizatio.monthlyPayment,
-        monthlyRate = _calculateMonthlyPaym.monthlyRate;
+        monthlyRate = _calculateAmortizatio.monthlyRate,
+        amortization = _calculateAmortizatio.amortization;
 
     document.getElementById("monthlyPayment").innerHTML = monthlyPayment.toFixed(2);
     document.getElementById("monthlyRate").innerHTML = (monthlyRate * 100).toFixed(2);
+    amortization.forEach(function (month) {
+        return console.log(month);
+    });
 });
+
+/***/ })
+/******/ ]);
+//# sourceMappingURL=main.bundle.js.map

js/main.js

@@ -1,4 +1,4 @@
-let calculateMonthlyPayment = function (principal, years, rate) {
+let calculateMonthlyPayment = (principal, years, rate) => {
     let monthlyRate = 0;
     if (rate) {
         monthlyRate = rate / 100 / 12;
@@ -13,12 +13,31 @@ let calculateMonthlyPayment = function (principal, years, rate) {
     //      monthlyPayment: monthlyPayment,
     //      monthlyRate: monthlyRate };
 };
+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};
+};
 
-document.getElementById('calcBtn').addEventListener('click', function () {
+document.getElementById('calcBtn').addEventListener('click', () => {
     let principal = document.getElementById("principal").value;
     let years = document.getElementById("years").value;
     let rate = document.getElementById("rate").value;
-    let {monthlyPayment, monthlyRate} = calculateMonthlyPayment(principal, years, rate);
+    let {monthlyPayment, monthlyRate, amortization} = calculateAmortization(principal, years, rate);
     document.getElementById("monthlyPayment").innerHTML = monthlyPayment.toFixed(2);
     document.getElementById("monthlyRate").innerHTML = (monthlyRate*100).toFixed(2);
+    amortization.forEach(month => console.log(month));
 });

package.json

@@ -5,14 +5,17 @@
   "main": "main.js",
   "scripts": {
     "babel": "babel --presets es2015 js/main.js -o build/main.bundle.js",
-    "start": "http-server -p 7001"
+    "start": "http-server -p 7000",
+    "webpack": "webpack"
   },
   "author": "RaghuJS",
   "license": "MIT",
   "devDependencies": {
     "babel-cli": "^6.22.2",
     "babel-core": "^6.22.1",
+    "babel-loader": "^6.2.10",
     "babel-preset-es2015": "^6.22.0",
-    "http-server": "^0.9.0"
+    "http-server": "^0.9.0",
+    "webpack": "^2.2.1"
   }
 }

webpack.config.js

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