commit 7a67d6622167798236c266d7f21736f3b1b6efdd Author: Raghu-Ch Date: Mon Feb 13 23:04:02 2017 -0800 Initial commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..7a1537b --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +.idea +node_modules diff --git a/README.md b/README.md new file mode 100644 index 0000000..4b30348 --- /dev/null +++ b/README.md @@ -0,0 +1,3 @@ +## ES6 Handson Guru +Lets use new ES6 features by doing small application. +Mortgage Calculator ## ES6 diff --git a/build/main.bundle.js b/build/main.bundle.js new file mode 100644 index 0000000..e99b19c --- /dev/null +++ b/build/main.bundle.js @@ -0,0 +1,30 @@ +'use strict'; + +var calculateMonthlyPayment = function calculateMonthlyPayment(principal, years, rate) { + var monthlyRate = 0; + if (rate) { + monthlyRate = rate / 100 / 12; + } + var monthlyPayment = principal * monthlyRate / (1 - Math.pow(1 / (1 + monthlyRate), years * 12)); + return { principal: principal, years: years, rate: rate, monthlyPayment: monthlyPayment, monthlyRate: monthlyRate }; + // Creating Objects from Variables ## ES6 + // shorted for the following ES5 syntax + // return { principal: principal, + // years: years, + // rate: rate, + // monthlyPayment: monthlyPayment, + // monthlyRate: 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 _calculateMonthlyPaym = calculateMonthlyPayment(principal, years, rate), + monthlyPayment = _calculateMonthlyPaym.monthlyPayment, + monthlyRate = _calculateMonthlyPaym.monthlyRate; + + document.getElementById("monthlyPayment").innerHTML = monthlyPayment.toFixed(2); + document.getElementById("monthlyRate").innerHTML = (monthlyRate * 100).toFixed(2); +}); diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..2553d82 --- /dev/null +++ b/css/styles.css @@ -0,0 +1,160 @@ +body { + font-family: 'Roboto', 'Sans Serif'; + font-size: 16px; + padding: 0; + margin: 0; +} + +header { + background-color: #03A9F4; + padding: 14px; + box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); +} + +h1, h2, h3 { + font-weight: 300; +} + +header > h1 { + font-weight: 300; + font-size: 24px; + margin: 0; + color: #FFFFFF; +} + +h2 { + font-size: 22px; + margin: 20px 0 0 0; +} + +h2 > .currency { + color: #0288D1; +} + +h3 { + margin: 10px 0 28px 0; +} + +h3 > span { + color: #0288D1; +} + +.principal { + color: #0288D1; +} + +.interest { + color: #EF6C00; +} + +input[type=text] { + -webkit-appearance: none; + width: 150px; + height: 24px; + padding: 3px 8px; + font-size: 14px; + line-height: 1.42857143; + color: #555; + border: 1px solid #ccc; + border-radius: 2px; + -webkit-box-shadow: none; + box-shadow: none; +} + +table { + border-collapse: collapse; + font-weight: 300; + font-size: 12px; +} + +th { + text-align: right; + font-weight: 400; +} + +td { + text-align: right; + padding: 0 .5rem; +} + +th, +td { + border: solid 1px #EEEEEE !important; + padding: 1px 4px; +} + +label { + display: inline-block; + width: 80px; + text-align: right; + margin-right: 4px; +} + +.content { + padding: 20px; +} + +.bar { + display: inline-block; + border: none; + height: 8px; +} + +.bar.principal { + background-color: #0288D1; + margin-right:1px; +} + +.bar.interest { + background-color: #EF6C00; + margin-left:1px; +} + +.stretch { + width: 100%; + padding-left:0; + padding-right:0; +} + +.flex { + display: -webkit-flex; + display: flex; +} + +.currency::before { + content:"$"; +} + +.left { + text-align: left; +} + +.form > div { + margin: 6px 0; +} + +button { + text-transform: none; + -webkit-appearance: none; + cursor: pointer; + padding: 12px 18px; + border-radius: 2px; + background: #FCFCFC; + font-size: 16px; + border: solid 1px #ddd; + color: #444; +} + +button:hover { + background: #F4F4F4; + border: solid 1px #ccc; +} + +button:active { + background: #FEFEFE; + border: solid 1px #ddd; +} + +button:focus { + outline:0; +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..9bd6f19 --- /dev/null +++ b/index.html @@ -0,0 +1,36 @@ + + + + + + + + +
+

Mortgage Calculator

+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+

Monthly Payment:

+

MonthlyRate:

+
+ + + diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..d9d3ea0 --- /dev/null +++ b/js/main.js @@ -0,0 +1,24 @@ +let calculateMonthlyPayment = function (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}; + // Creating Objects from Variables ## ES6 + // shorted for the following ES5 syntax + // return { principal: principal, + // years: years, + // rate: rate, + // monthlyPayment: monthlyPayment, + // monthlyRate: monthlyRate }; +}; + +document.getElementById('calcBtn').addEventListener('click', function () { + 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); + document.getElementById("monthlyPayment").innerHTML = monthlyPayment.toFixed(2); + document.getElementById("monthlyRate").innerHTML = (monthlyRate*100).toFixed(2); +}); diff --git a/package.json b/package.json new file mode 100644 index 0000000..9e4b57d --- /dev/null +++ b/package.json @@ -0,0 +1,18 @@ +{ + "name": "es6-tutorial", + "version": "1.0.0", + "description": "ES6 DEMO", + "main": "main.js", + "scripts": { + "babel": "babel --presets es2015 js/main.js -o build/main.bundle.js", + "start": "http-server -p 7001" + }, + "author": "RaghuJS", + "license": "MIT", + "devDependencies": { + "babel-cli": "^6.22.2", + "babel-core": "^6.22.1", + "babel-preset-es2015": "^6.22.0", + "http-server": "^0.9.0" + } +} diff --git a/rates.json b/rates.json new file mode 100644 index 0000000..ee8e0ac --- /dev/null +++ b/rates.json @@ -0,0 +1,17 @@ +[ + { + "name": "30 years fixed", + "rate": "13", + "years": "30" + }, + { + "name": "20 years fixed", + "rate": "2.8", + "years": "20" + }, + { + "name": "15 years fixed", + "rate": "2.5", + "years": "15" + } +]