From f158b2ac1fc6b0bf892f9e6840e4e2393b842b36 Mon Sep 17 00:00:00 2001 From: Simon Mai Date: Thu, 31 Aug 2017 16:58:37 -0400 Subject: [PATCH 1/5] Modularize the files --- index.html | 3 ++- js/main.js | 20 ++++++++------------ js/mortgage.js | 27 +++++++++++++++++++++++++++ 3 files changed, 37 insertions(+), 13 deletions(-) create mode 100644 js/mortgage.js 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..ddd9fa2f9 100644 --- a/js/main.js +++ b/js/main.js @@ -1,15 +1,11 @@ -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 * as mortgage from './mortgage'; -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('calcBtn').addEventListener('click', () => { + let principal = document.getElementById("principal").value; + let years = document.getElementById("years").value; + let rate = document.getElementById("rate").value; + let {monthlyPayment, monthlyRate, amortization} = mortgage.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 diff --git a/js/mortgage.js b/js/mortgage.js new file mode 100644 index 000000000..d8c3acf43 --- /dev/null +++ b/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 Date: Thu, 31 Aug 2017 17:12:11 -0400 Subject: [PATCH 2/5] Complete part 1: Using a Class --- index.html | 1 + js/main.js | 63 +++++++++++++++++++++++++++++++++++++++++++++++++----- 2 files changed, 59 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index cf6d4003d..693d0771a 100644 --- a/index.html +++ b/index.html @@ -30,6 +30,7 @@

Mortgage Calculator

Monthly Payment:

Monthly Rate:

+

Amortization:

diff --git a/js/main.js b/js/main.js index ddd9fa2f9..e87c83035 100644 --- a/js/main.js +++ b/js/main.js @@ -1,11 +1,64 @@ -import * as mortgage from './mortgage'; +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 { let principal = document.getElementById("principal").value; let years = document.getElementById("years").value; let rate = document.getElementById("rate").value; - let {monthlyPayment, monthlyRate, amortization} = mortgage.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 From 17698f9e2582acae495ef7a7b4f8d79e9cd11af2 Mon Sep 17 00:00:00 2001 From: Simon Mai Date: Thu, 31 Aug 2017 17:15:21 -0400 Subject: [PATCH 3/5] Complete using classes in modules exercise --- js/main.js | 36 +----------------------------------- js/mortgage2.js | 35 +++++++++++++++++++++++++++++++++++ 2 files changed, 36 insertions(+), 35 deletions(-) create mode 100644 js/mortgage2.js diff --git a/js/main.js b/js/main.js index e87c83035..ed6b0237f 100644 --- a/js/main.js +++ b/js/main.js @@ -1,38 +1,4 @@ -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 { let principal = document.getElementById("principal").value; diff --git a/js/mortgage2.js b/js/mortgage2.js new file mode 100644 index 000000000..80c238c88 --- /dev/null +++ b/js/mortgage2.js @@ -0,0 +1,35 @@ +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: Thu, 31 Aug 2017 17:27:14 -0400 Subject: [PATCH 4/5] Complete promises tutorial --- js/rate-service-mock.js | 20 ++++++++++++++++++++ js/ratefinder.js | 9 +++++++++ ratefinder.html | 10 ++++++++++ 3 files changed, 39 insertions(+) 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..bda613556 --- /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)); diff --git a/ratefinder.html b/ratefinder.html new file mode 100644 index 000000000..ae60d5f8a --- /dev/null +++ b/ratefinder.html @@ -0,0 +1,10 @@ + + + + + + +
+ + + From 2fab9335bef0405fa8fc054d22f5f7643799f9b7 Mon Sep 17 00:00:00 2001 From: Simon Mai Date: Thu, 31 Aug 2017 17:30:10 -0400 Subject: [PATCH 5/5] Add configuration files --- package.json | 28 ++++++++++++++++++++++++++++ webpack.config.js | 28 ++++++++++++++++++++++++++++ 2 files changed, 56 insertions(+) create mode 100644 package.json create mode 100644 webpack.config.js diff --git a/package.json b/package.json new file mode 100644 index 000000000..321b2c478 --- /dev/null +++ b/package.json @@ -0,0 +1,28 @@ +{ + "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": { + "start": "http-server", + "webpack": "webpack" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/maismin/es6-tutorial.git" + }, + "author": "", + "license": "ISC", + "bugs": { + "url": "https://github.com/maismin/es6-tutorial/issues" + }, + "homepage": "https://github.com/maismin/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/webpack.config.js b/webpack.config.js new file mode 100644 index 000000000..d01b75ba7 --- /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