From 887f69287929716fedcb93570ffb380d0be7c684 Mon Sep 17 00:00:00 2001 From: Muhammad Rehman Date: Mon, 28 Aug 2017 20:36:52 -0400 Subject: [PATCH] Completed Tutorial --- build/app.bundle.js | 153 +++++++++++++++++++++++++++++++++ build/app.bundle.js.map | 1 + build/main.bundle.js | 153 +++++++++++++++++++++++++++++++++ build/main.bundle.js.map | 1 + build/ratefinder.bundle.js | 123 ++++++++++++++++++++++++++ build/ratefinder.bundle.js.map | 1 + index.html | 3 +- js/main.js | 42 ++++++--- js/mortgage.js | 28 ++++++ js/mortgage2.js | 35 ++++++++ js/rate-service-mock.js | 20 +++++ js/ratefinder.js | 9 ++ package.json | 29 +++++++ ratefinder.html | 10 +++ webpack.config.js | 28 ++++++ 15 files changed, 622 insertions(+), 14 deletions(-) create mode 100644 build/app.bundle.js create mode 100644 build/app.bundle.js.map create mode 100644 build/main.bundle.js create mode 100644 build/main.bundle.js.map create mode 100644 build/ratefinder.bundle.js create mode 100644 build/ratefinder.bundle.js.map create mode 100644 js/mortgage.js create mode 100644 js/mortgage2.js create mode 100644 js/rate-service-mock.js create mode 100644 js/ratefinder.js create mode 100644 package.json create mode 100644 ratefinder.html create mode 100644 webpack.config.js diff --git a/build/app.bundle.js b/build/app.bundle.js new file mode 100644 index 000000000..b375eef2c --- /dev/null +++ b/build/app.bundle.js @@ -0,0 +1,153 @@ +/******/ (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 = (rate / 12).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
\n
\n
\n
\n \n ' + Math.round(year.interestY) + '\n ' + Math.round(year.balance) + '\n \n '; + }); + document.getElementById("amortization").innerHTML = html; +}); + +/***/ }), +/* 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 = interestY + interestM; + principalY = principalY + principalM; + balance = balance - principalM; + } + amortization.push({ principalY: principalY, interestY: interestY, balance: balance }); + } + return amortization; + } + }]); + + return Mortgage; +}(); + +exports.default = Mortgage; + +/***/ }) +/******/ ]); +//# sourceMappingURL=app.bundle.js.map \ No newline at end of file diff --git a/build/app.bundle.js.map b/build/app.bundle.js.map new file mode 100644 index 000000000..15a746b80 --- /dev/null +++ b/build/app.bundle.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["webpack:///webpack/bootstrap 2f69c5b49ad04efb499c","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":"app.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 2f69c5b49ad04efb499c","import Mortgage from './mortgage2';\n\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 = (rate / 12).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
\n
\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\n ' + Math.round(year.principalY) + '\n \n
\n
\n
\n
\n
\n
\n \n ' + Math.round(year.interestY) + '\n ' + Math.round(year.balance) + '\n \n '; + }); + document.getElementById("amortization").innerHTML = html; +}); + +/***/ }), +/* 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 = interestY + interestM; + principalY = principalY + principalM; + balance = 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..a8215b7f0 --- /dev/null +++ b/build/main.bundle.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["webpack:///webpack/bootstrap 5390e0735a45fc678e19","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 5390e0735a45fc678e19","import Mortgage from './mortgage2';\n\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 = (rate / 12).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
\n
\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' + rate.years + '' + rate.rate + '%'; + }); + document.getElementById("rates").innerHTML = html; +}).catch(function (e) { + return console.log(e); +}); + +/***/ }), +/* 3 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +Object.defineProperty(exports, "__esModule", { + value: true +}); +var rates = [{ + "name": "30 years fixed", + "rate": "13", + "years": "30" +}, { + "name": "20 years fixed", + "rate": "2.8", + "years": "20" +}]; + +var findAll = exports.findAll = function findAll() { + return new Promise(function (resolve, reject) { + if (rates) { + resolve(rates); + } else { + reject("No rates"); + } + }); +}; + +/***/ }) +/******/ ]); +//# sourceMappingURL=ratefinder.bundle.js.map \ No newline at end of file diff --git a/build/ratefinder.bundle.js.map b/build/ratefinder.bundle.js.map new file mode 100644 index 000000000..a696257e2 --- /dev/null +++ b/build/ratefinder.bundle.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["webpack:///webpack/bootstrap 2f69c5b49ad04efb499c","webpack:///./js/ratefinder.js","webpack:///./js/rate-service-mock.js"],"names":["service","findAll","then","html","rates","forEach","rate","name","years","document","getElementById","innerHTML","catch","console","log","e","Promise","resolve","reject"],"mappings":";AAAA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAK;AACL;AACA;;AAEA;AACA;AACA;AACA,mCAA2B,0BAA0B,EAAE;AACvD,yCAAiC,eAAe;AAChD;AACA;AACA;;AAEA;AACA,8DAAsD,+DAA+D;;AAErH;AACA;;AAEA;AACA;;;;;;;;;;;;AC7DA;;IAAYA,O;;;;AAEZA,QAAQC,OAAR,GACKC,IADL,CACU,iBAAS;AACX,QAAIC,OAAO,EAAX;AACAC,UAAMC,OAAN,CAAc;AAAA,eAAQF,qBAAmBG,KAAKC,IAAxB,iBAAwCD,KAAKE,KAA7C,iBAA8DF,KAAKA,IAAnE,gBAAR;AAAA,KAAd;AACAG,aAASC,cAAT,CAAwB,OAAxB,EAAiCC,SAAjC,GAA6CR,IAA7C;AACH,CALL,EAMKS,KANL,CAMW;AAAA,WAAKC,QAAQC,GAAR,CAAYC,CAAZ,CAAL;AAAA,CANX,E;;;;;;;;;;;;ACFA,IAAIX,QAAQ,CACR;AACI,YAAQ,gBADZ;AAEI,YAAQ,IAFZ;AAGI,aAAS;AAHb,CADQ,EAMR;AACI,YAAQ,gBADZ;AAEI,YAAQ,KAFZ;AAGI,aAAS;AAHb,CANQ,CAAZ;;AAaO,IAAIH,4BAAU,SAAVA,OAAU;AAAA,WAAM,IAAIe,OAAJ,CAAY,UAACC,OAAD,EAAUC,MAAV,EAAqB;AACxD,YAAId,KAAJ,EAAW;AACPa,oBAAQb,KAAR;AACH,SAFD,MAEO;AACHc,mBAAO,UAAP;AACH;AACJ,KAN0B,CAAN;AAAA,CAAd,C","file":"ratefinder.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 = 2);\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap 2f69c5b49ad04efb499c","import * as service from './rate-service-mock';\n \nservice.findAll()\n .then(rates => {\n let html = '';\n rates.forEach(rate => html += `${rate.name}${rate.years}${rate.rate}%`);\n document.getElementById(\"rates\").innerHTML = html;\n })\n .catch(e => console.log(e));\n\n\n// WEBPACK FOOTER //\n// ./js/ratefinder.js","let rates = [\n {\n \"name\": \"30 years fixed\",\n \"rate\": \"13\",\n \"years\": \"30\"\n },\n {\n \"name\": \"20 years fixed\",\n \"rate\": \"2.8\",\n \"years\": \"20\"\n }\n];\n\nexport let findAll = () => new Promise((resolve, reject) => {\n if (rates) {\n resolve(rates);\n } else {\n reject(\"No rates\");\n }\n});\n\n\n// WEBPACK FOOTER //\n// ./js/rate-service-mock.js"],"sourceRoot":""} \ No newline at end of file diff --git a/index.html b/index.html index 0364f0343..cf6d4003d 100644 --- a/index.html +++ b/index.html @@ -29,7 +29,8 @@

Mortgage Calculator

Monthly Payment:

+

Monthly Rate:

- + \ No newline at end of file diff --git a/js/main.js b/js/main.js index 6565a8969..3381adcde 100644 --- a/js/main.js +++ b/js/main.js @@ -1,15 +1,31 @@ -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 './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 = (rate / 12).toFixed(2); + let html = ""; + mortgage.amortization.forEach((year, index) => html += ` + + ${index + 1} + ${Math.round(year.principalY)} + +
+
+
+
+
+
+ + ${Math.round(year.interestY)} + ${Math.round(year.balance)} + + `); + document.getElementById("amortization").innerHTML = html; }); \ No newline at end of file diff --git a/js/mortgage.js b/js/mortgage.js new file mode 100644 index 000000000..6c17e8e1c --- /dev/null +++ b/js/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 new Promise((resolve, reject) => { + if (rates) { + resolve(rates); + } else { + reject("No rates"); + } +}); \ No newline at end of file diff --git a/js/ratefinder.js b/js/ratefinder.js new file mode 100644 index 000000000..ca5272497 --- /dev/null +++ b/js/ratefinder.js @@ -0,0 +1,9 @@ +import * as service from './rate-service-mock'; + +service.findAll() + .then(rates => { + let html = ''; + rates.forEach(rate => html += `${rate.name}${rate.years}${rate.rate}%`); + document.getElementById("rates").innerHTML = html; + }) + .catch(e => console.log(e)); \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 000000000..eced67e36 --- /dev/null +++ b/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/MRehman000/es6-tutorial.git" + }, + "author": "", + "license": "ISC", + "bugs": { + "url": "https://github.com/MRehman000/es6-tutorial/issues" + }, + "homepage": "https://github.com/MRehman000/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.5" + } +} diff --git a/ratefinder.html b/ratefinder.html new file mode 100644 index 000000000..123a71b35 --- /dev/null +++ b/ratefinder.html @@ -0,0 +1,10 @@ + + + + + + +
+ + + \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 000000000..012425076 --- /dev/null +++ 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' + }; \ No newline at end of file