From e1ec462faaeb03e5c22177deb34273724a748ec9 Mon Sep 17 00:00:00 2001 From: Ichwan Palongengi Date: Mon, 11 Sep 2017 20:05:19 -0400 Subject: [PATCH 1/4] Set Up the Babel Project - Replace the script on `index.html` to be sourced to the result of transpilation with babel - Add some scripts related to babel and starting an http-server in the `package.json` - Add `build/` and `node_modules/` directories to .gitignore Changes to be committed: modified: .gitignore modified: index.html new file: package.json --- .gitignore | 5 ++++- index.html | 2 +- package.json | 26 ++++++++++++++++++++++++++ 3 files changed, 31 insertions(+), 2 deletions(-) create mode 100644 package.json diff --git a/.gitignore b/.gitignore index 723ef36f4..d1ea5fee6 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,4 @@ -.idea \ No newline at end of file +.idea + +build/ +node_modules/ diff --git a/index.html b/index.html index 0364f0343..e914974b7 100644 --- a/index.html +++ b/index.html @@ -30,6 +30,6 @@

Mortgage Calculator

Monthly Payment:

- + \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 000000000..96696a4eb --- /dev/null +++ b/package.json @@ -0,0 +1,26 @@ +{ + "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" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/ipalongengi/es6-tutorial.git" + }, + "author": "", + "license": "ISC", + "bugs": { + "url": "https://github.com/ipalongengi/es6-tutorial/issues" + }, + "homepage": "https://github.com/ipalongengi/es6-tutorial#readme", + "devDependencies": { + "babel-cli": "^6.26.0", + "babel-core": "^6.26.0", + "babel-preset-es2015": "^6.24.1", + "http-server": "^0.10.0" + } +} From 2c666719eaa1775dde022332f54353049f029d49 Mon Sep 17 00:00:00 2001 From: Ichwan Palongengi Date: Mon, 11 Sep 2017 20:21:04 -0400 Subject: [PATCH 2/4] Destructure the `main.js` and add new function - Destructure the `calculateMonthlyPayment()` function - Replace *all* instances of `let` with `var` to achieve the desired block scoping instead of variable scoping - Declare a new function called `calculateAmortization()` that calculates the amortization for each month - Insert an additional inner HTML when the `calculate` button is pressed. Changes to be committed: modified: index.html modified: js/main.js --- index.html | 1 + js/main.js | 37 +++++++++++++++++++++++++++++-------- 2 files changed, 30 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index e914974b7..19a513cb2 100644 --- a/index.html +++ b/index.html @@ -29,6 +29,7 @@

Mortgage Calculator

Monthly Payment:

+

Monthly Rate:

diff --git a/js/main.js b/js/main.js index 6565a8969..aec5bcc2e 100644 --- a/js/main.js +++ b/js/main.js @@ -1,15 +1,36 @@ -var calculateMonthlyPayment = function (principal, years, rate) { +let calculateMonthlyPayment = (principal, years, rate) => { if (rate) { var monthlyRate = rate / 100 / 12; } - var monthlyPayment = principal * monthlyRate / (1 - (Math.pow(1 / (1 + monthlyRate), years * 12))); - return monthlyPayment; + let monthlyPayment = principal * monthlyRate / (1 - (Math.pow(1 / (1 + monthlyRate), years * 12))); + return {principal, years, rate, monthlyPayment, monthlyRate}; }; -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); +let calculateAmortization = (principal, years, rate) => { + let {monthlyRate, monthlyPayment} = calculateMonthlyPayment(principal, years, rate); + let balance = principal; + let amortization = []; + for (let y=0; y { + let principal = document.getElementById("principal").value; + let years = document.getElementById("years").value; + let rate = document.getElementById("rate").value; + 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)); }); \ No newline at end of file From 05ea6459dd4af7925ed887b0530699997b1b70dd Mon Sep 17 00:00:00 2001 From: Ichwan Palongengi Date: Mon, 11 Sep 2017 20:53:20 -0400 Subject: [PATCH 3/4] Modularize the codes by using Classes - Set up webpack and created the necessary config file - Separate the `monthlyPayment` and `amortization` functions into separate class `mortgage.js` and import it to `main.js` - Make some changes to the function that fires on the click of `Calculate` button so as to show bar graphs of progression of payments that need to be made Changes to be committed: modified: index.html modified: js/main.js new file: js/mortgage.js modified: package.json new file: webpack.config.js --- index.html | 3 ++- js/main.js | 54 +++++++++++++++++++++-------------------------- js/mortgage.js | 33 +++++++++++++++++++++++++++++ package.json | 7 ++++-- webpack.config.js | 25 ++++++++++++++++++++++ 5 files changed, 89 insertions(+), 33 deletions(-) create mode 100644 js/mortgage.js create mode 100644 webpack.config.js diff --git a/index.html b/index.html index 19a513cb2..d05caa959 100644 --- a/index.html +++ b/index.html @@ -29,7 +29,8 @@

Mortgage Calculator

Monthly Payment:

-

Monthly Rate:

+

Monthly Rate:

+

Amortization:

diff --git a/js/main.js b/js/main.js index aec5bcc2e..4523d736c 100644 --- a/js/main.js +++ b/js/main.js @@ -1,36 +1,30 @@ -let calculateMonthlyPayment = (principal, years, rate) => { - if (rate) { - var monthlyRate = rate / 100 / 12; - } - let monthlyPayment = principal * monthlyRate / (1 - (Math.pow(1 / (1 + monthlyRate), years * 12))); - return {principal, years, rate, monthlyPayment, monthlyRate}; -}; - -let calculateAmortization = (principal, years, rate) => { - let {monthlyRate, monthlyPayment} = calculateMonthlyPayment(principal, years, rate); - let balance = principal; - let amortization = []; - for (let y=0; y { let principal = document.getElementById("principal").value; let years = document.getElementById("years").value; let rate = document.getElementById("rate").value; - 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)); + 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..5f5a30177 --- /dev/null +++ b/js/mortgage.js @@ -0,0 +1,33 @@ +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 Date: Tue, 12 Sep 2017 21:02:40 -0400 Subject: [PATCH 4/4] Add New Page for Using Promises - Modify `webpack.config.js` to handle the additional HTML page to be parsed - Create `ratefinder.js` that is called directly by the `ratefinder.html` - Create `rate-service-mock.js` that is uses promise to get data from a mock JSON objects. --- js/rate-service-mock.js | 20 ++++++++++++++++++++ js/ratefinder.js | 9 +++++++++ ratefinder.html | 10 ++++++++++ webpack.config.js | 6 ++++-- 4 files changed, 43 insertions(+), 2 deletions(-) create mode 100644 js/rate-service-mock.js create mode 100644 js/ratefinder.js create mode 100644 ratefinder.html diff --git a/js/rate-service-mock.js b/js/rate-service-mock.js new file mode 100644 index 000000000..18fdadecb --- /dev/null +++ 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"); + } +}); \ No newline at end of file diff --git a/js/ratefinder.js b/js/ratefinder.js new file mode 100644 index 000000000..3fb760ca2 --- /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/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 index f09c62d6a..0d960414d 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -2,10 +2,12 @@ var path = require('path'); var webpack = require('webpack'); module.exports = { - entry: './js/main.js', + entry: { + app: './js/main.js', + ratefinder: './js/ratefinder.js'}, output: { path: path.resolve(__dirname, 'build'), - filename: 'main.bundle.js' + filename: '[name].bundle.js' }, module: { loaders: [