diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..723ef36f4 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.idea \ No newline at end of file diff --git a/README.md b/README.md index 746d7473e..fbe6bf522 100644 --- a/README.md +++ b/README.md @@ -1 +1,3 @@ -ES6 Tutorial \ No newline at end of file +## ES6 Tutorial + +Start the tutorial [here](http://ccoenraets.github.io/es6-tutorial). \ No newline at end of file diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 000000000..f0aefa900 --- /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; +} \ No newline at end of file diff --git a/index.html b/index.html index 24813073d..0364f0343 100644 --- a/index.html +++ b/index.html @@ -2,27 +2,34 @@ - + + +
+

Mortgage Calculator

+
- +
- +
- - + + +
+
+ +
-

Monthly Payment:

- + \ No newline at end of file diff --git a/calc.js b/js/main.js similarity index 100% rename from calc.js rename to js/main.js diff --git a/package.json b/package.json deleted file mode 100644 index 7eda016e0..000000000 --- a/package.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "name": "es6-tutorial", - "version": "1.0.0", - "description": "ECMAScript 6 Tutorial", - "main": "index.js", - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" - }, - "author": "Christophe Coenraets (http://coenraets.org/)", - "license": "ISC", - "repository": "https://gitub.com/ccoenraets/es6-tutorial", - "devDependencies": { - "babel-core": "^5.7.4", - "http-server": "^0.8.0" - } -} diff --git a/styles.css b/styles.css deleted file mode 100644 index c8372cbf5..000000000 --- a/styles.css +++ /dev/null @@ -1,120 +0,0 @@ -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; -} - -button { - -webkit-appearance: button; - color: #333; - background-color: #DDD; - border-color: #ccc; - display: inline-block; - padding: 6px 12px; - font-size: 14px; - font-weight: 400; - line-height: 1.42857143; - text-align: center; - white-space: nowrap; - vertical-align: middle; - -ms-touch-action: manipulation; - touch-action: manipulation; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - background-image: none; - border: 1px solid #CCC; - border-radius: 2px; -} - -button:hover { - background: none repeat scroll 0 0 #CCC; -} - -button:active { - background: none repeat scroll 0 0 #BBB; -} - -button:focus { - outline:0; -} - -table { - border-collapse: collapse; -} - -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; -} - -.content { - padding: 20px; -} - -.bar { - display: inline-block; - border: none; - height: 8px; -} - -.bar.principal { - background-color: rgb(166, 197, 103); - margin-right:.5px; -} - -.bar.interest { - background-color: rgb(252, 187, 105); - margin-left:.5px; -} - -.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; -} - -.form button { - margin: 8px 0; - margin-left: 84px; -} \ No newline at end of file