diff --git a/.gitignore b/.gitignore
index 723ef36f4..d92fedead 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,63 @@
-.idea
\ No newline at end of file
+.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/
diff --git a/build/main.bundle.js b/build/main.bundle.js
new file mode 100644
index 000000000..7ee1594d1
--- /dev/null
+++ b/build/main.bundle.js
@@ -0,0 +1,154 @@
+/******/ (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;
+/******/
+/******/ // 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 _mortgage = __webpack_require__(1);
+
+var _mortgage2 = _interopRequireDefault(_mortgage);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 mortgage = new _mortgage2.default(principal, years, rate);
+ document.getElementById("monthlyPayment").innerHTML = mortgage.monthlyPayment.toFixed(2);
+ document.getElementById("monthlyRate").innerHTML = (mortgage.rate * 100).toFixed(2);
+ var html = "";
+ mortgage.amortization.forEach(function (year, index) {
+ return html += '\n \n | ' + (index + 1) + ' | \n ' + Math.round(year.principalY) + ' | \n \n \n | \n ' + Math.round(year.interestY) + ' | \n ' + Math.round(year.balance) + ' | \n
\n ';
+ });
+ document.getElementById("amortization").innerHTML = html;
+}); // THIS WHOLE SET UP IS IN ORDER TO USE ECMAScript 6
+// Set up includes babel, http, node, etc
+
+/***/ }),
+/* 1 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+var Mortgage = function () {
+ function Mortgage(principal, years, rate) {
+ _classCallCheck(this, Mortgage);
+
+ this.principal = principal;
+ this.years = years;
+ this.rate = rate;
+ }
+
+ _createClass(Mortgage, [{
+ key: "monthlyPayment",
+ get: function get() {
+ var monthlyRate = this.rate / 100 / 12;
+ return this.principal * monthlyRate / (1 - Math.pow(1 / (1 + monthlyRate), this.years * 12));
+ }
+ }, {
+ key: "amortization",
+ get: function get() {
+ var monthlyPayment = this.monthlyPayment;
+ var monthlyRate = this.rate / 100 / 12;
+ var balance = this.principal;
+ var amortization = [];
+ for (var y = 0; y < this.years; y++) {
+ var interestY = 0;
+ var principalY = 0;
+ for (var m = 0; m < 12; m++) {
+ var interestM = balance * monthlyRate;
+ var principalM = monthlyPayment - interestM;
+ interestY += interestM;
+ principalY += principalM;
+ balance -= principalM;
+ }
+ amortization.push({ principalY: principalY, interestY: interestY, balance: balance });
+ }
+ return amortization;
+ }
+ }]);
+
+ return Mortgage;
+}();
+
+exports.default = Mortgage;
+
+/***/ })
+/******/ ]);
+//# sourceMappingURL=main.bundle.js.map
\ No newline at end of file
diff --git a/build/main.bundle.js.map b/build/main.bundle.js.map
new file mode 100644
index 000000000..e25eda512
--- /dev/null
+++ b/build/main.bundle.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["webpack:///webpack/bootstrap 5a6a384e6c6ae4ad46fc","webpack:///./js/main.js","webpack:///./js/mortgage2.js"],"names":["document","getElementById","addEventListener","principal","value","years","rate","mortgage","innerHTML","monthlyPayment","toFixed","html","amortization","forEach","year","index","Math","round","principalY","interestY","balance","Mortgage","monthlyRate","pow","y","m","interestM","principalM","push"],"mappings":"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","file":"main.bundle.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 0);\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap 5a6a384e6c6ae4ad46fc","// THIS WHOLE SET UP IS IN ORDER TO USE ECMAScript 6\n// Set up includes babel, http, node, etc\nimport Mortgage from './mortgage2';\n\ndocument.getElementById('calcBtn').addEventListener('click', () => {\n let principal = document.getElementById(\"principal\").value;\n let years = document.getElementById(\"years\").value;\n let rate = document.getElementById(\"rate\").value;\n let mortgage = new Mortgage(principal, years, rate);\n document.getElementById(\"monthlyPayment\").innerHTML = mortgage.monthlyPayment.toFixed(2);\n document.getElementById(\"monthlyRate\").innerHTML = (mortgage.rate * 100).toFixed(2);\n let html = \"\";\n mortgage.amortization.forEach((year, index) => html += `\n \n | ${index + 1} | \n ${Math.round(year.principalY)} | \n \n \n | \n ${Math.round(year.interestY)} | \n ${Math.round(year.balance)} | \n
\n `);\n document.getElementById(\"amortization\").innerHTML = html;\n});\n\n\n// WEBPACK FOOTER //\n// ./js/main.js","export default class Mortgage {\n \n constructor(principal, years, rate) {\n this.principal = principal;\n this.years = years;\n this.rate = rate;\n }\n \n get monthlyPayment() {\n let monthlyRate = this.rate / 100 / 12;\n return this.principal * monthlyRate / (1 - (Math.pow(1 / (1 + monthlyRate),\n this.years * 12)));\n }\n \n get amortization() {\n let monthlyPayment = this.monthlyPayment;\n let monthlyRate = this.rate / 100 / 12;\n let balance = this.principal;\n let amortization = [];\n for (let y = 0; y < this.years; y++) {\n let interestY = 0;\n let principalY = 0;\n for (let m = 0; m < 12; m++) {\n let interestM = balance * monthlyRate;\n let principalM = monthlyPayment - interestM;\n interestY += interestM;\n principalY += principalM;\n balance -= principalM;\n }\n amortization.push({principalY, interestY, balance});\n }\n return amortization;\n }\n}\n\n\n// WEBPACK FOOTER //\n// ./js/mortgage2.js"],"sourceRoot":""}
\ No newline at end of file
diff --git a/index.html b/index.html
index 0364f0343..d05caa959 100644
--- a/index.html
+++ b/index.html
@@ -29,7 +29,9 @@ Mortgage Calculator
Monthly Payment:
+ Monthly Rate:
+ Amortization:
-
+