vcgit-forge/ES6-Handson
1
0
Fork 0
mirror of https://github.com/Raghu-Ch/ES6-Handson.git synced 2026-02-10 04:33:02 -05:00
Code Issues Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Raghu-Ch
2017-02-13 23:04:02 -08:00
commit 7a67d66221
8 changed files with 290 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored Normal file
View File

@@ -0,0 +1,2 @@
.idea
node_modules

3
README.md Normal file
View File

@@ -0,0 +1,3 @@
## ES6 Handson Guru
Lets use new ES6 features by doing small application.
Mortgage Calculator ## ES6

30
build/main.bundle.js Normal file
View File

@@ -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);
});

160
css/styles.css Normal file
View File

@@ -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;
}

36
index.html Normal file
View File

@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,700' rel='stylesheet' type='text/css'>
<link href="css/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h1>Mortgage Calculator</h1>
</header>
<div class="content">
<div class="form">
<div>
<label>Principal:</label>
<input type="text" id="principal" value="200000"/>
</div>
<div>
<label>Years:</label>
<input type="text" id="years" value="30"/>
</div>
<div>
<label htmlFor="rate">Rate:</label>
<input type="text" id="rate" value="5.0"/>
</div>
<div>
<label htmlFor="calcBtn"></label>
<button id="calcBtn">Calculate</button>
</div>
</div>
<h2>Monthly Payment: <span id="monthlyPayment" class="currency"></span></h2>
<h3>MonthlyRate: <span id="monthlyRate"></span></h3>
</div>
<script src="build/main.bundle.js"></script>
</body>
</html>

24
js/main.js Normal file
View File

@@ -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);
});

18
package.json Normal file
View File

@@ -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"
}
}

17
rates.json Normal file
View File

@@ -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"
}
]