├── .gitignore ├── README.md ├── css └── styles.css ├── index.html ├── js └── main.js └── rates.json /.gitignore: -------------------------------------------------------------------------------- 1 | .idea -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## ES6 Tutorial 2 | 3 | Start the tutorial [here](http://ccoenraets.github.io/es6-tutorial). -------------------------------------------------------------------------------- /css/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Roboto', 'Sans Serif'; 3 | font-size: 16px; 4 | padding: 0; 5 | margin: 0; 6 | } 7 | 8 | header { 9 | background-color: #03A9F4; 10 | padding: 14px; 11 | box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 12 | } 13 | 14 | h1, h2, h3 { 15 | font-weight: 300; 16 | } 17 | 18 | header > h1 { 19 | font-weight: 300; 20 | font-size: 24px; 21 | margin: 0; 22 | color: #FFFFFF; 23 | } 24 | 25 | h2 { 26 | font-size: 22px; 27 | margin: 20px 0 0 0; 28 | } 29 | 30 | h2 > .currency { 31 | color: #0288D1; 32 | } 33 | 34 | h3 { 35 | margin: 10px 0 28px 0; 36 | } 37 | 38 | h3 > span { 39 | color: #0288D1; 40 | } 41 | 42 | .principal { 43 | color: #0288D1; 44 | } 45 | 46 | .interest { 47 | color: #EF6C00; 48 | } 49 | 50 | input[type=text] { 51 | -webkit-appearance: none; 52 | width: 150px; 53 | height: 24px; 54 | padding: 3px 8px; 55 | font-size: 14px; 56 | line-height: 1.42857143; 57 | color: #555; 58 | border: 1px solid #ccc; 59 | border-radius: 2px; 60 | -webkit-box-shadow: none; 61 | box-shadow: none; 62 | } 63 | 64 | table { 65 | border-collapse: collapse; 66 | font-weight: 300; 67 | font-size: 12px; 68 | } 69 | 70 | th { 71 | text-align: right; 72 | font-weight: 400; 73 | } 74 | 75 | td { 76 | text-align: right; 77 | padding: 0 .5rem; 78 | } 79 | 80 | th, 81 | td { 82 | border: solid 1px #EEEEEE !important; 83 | padding: 1px 4px; 84 | } 85 | 86 | label { 87 | display: inline-block; 88 | width: 80px; 89 | text-align: right; 90 | margin-right: 4px; 91 | } 92 | 93 | .content { 94 | padding: 20px; 95 | } 96 | 97 | .bar { 98 | display: inline-block; 99 | border: none; 100 | height: 8px; 101 | } 102 | 103 | .bar.principal { 104 | background-color: #0288D1; 105 | margin-right:1px; 106 | } 107 | 108 | .bar.interest { 109 | background-color: #EF6C00; 110 | margin-left:1px; 111 | } 112 | 113 | .stretch { 114 | width: 100%; 115 | padding-left:0; 116 | padding-right:0; 117 | } 118 | 119 | .flex { 120 | display: -webkit-flex; 121 | display: flex; 122 | } 123 | 124 | .currency::before { 125 | content:"$"; 126 | } 127 | 128 | .left { 129 | text-align: left; 130 | } 131 | 132 | .form > div { 133 | margin: 6px 0; 134 | } 135 | 136 | button { 137 | text-transform: none; 138 | -webkit-appearance: none; 139 | cursor: pointer; 140 | padding: 12px 18px; 141 | border-radius: 2px; 142 | background: #FCFCFC; 143 | font-size: 16px; 144 | border: solid 1px #ddd; 145 | color: #444; 146 | } 147 | 148 | button:hover { 149 | background: #F4F4F4; 150 | border: solid 1px #ccc; 151 | } 152 | 153 | button:active { 154 | background: #FEFEFE; 155 | border: solid 1px #ddd; 156 | } 157 | 158 | button:focus { 159 | outline:0; 160 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 |

Mortgage Calculator

11 |
12 |
13 |
14 |
15 | 16 | 17 |
18 |
19 | 20 | 21 |
22 |
23 | 24 | 25 |
26 |
27 | 28 | 29 |
30 |
31 |

Monthly Payment:

32 |
33 | 34 | 35 | -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | var calculateMonthlyPayment = function (principal, years, rate) { 2 | if (rate) { 3 | var monthlyRate = rate / 100 / 12; 4 | } 5 | var monthlyPayment = principal * monthlyRate / (1 - (Math.pow(1 / (1 + monthlyRate), years * 12))); 6 | return monthlyPayment; 7 | }; 8 | 9 | document.getElementById('calcBtn').addEventListener('click', function () { 10 | var principal = document.getElementById("principal").value; 11 | var years = document.getElementById("years").value; 12 | var rate = document.getElementById("rate").value; 13 | var monthlyPayment = calculateMonthlyPayment(principal, years, rate); 14 | document.getElementById("monthlyPayment").innerHTML = monthlyPayment.toFixed(2); 15 | }); -------------------------------------------------------------------------------- /rates.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "30 years fixed", 4 | "rate": "13", 5 | "years": "30" 6 | }, 7 | { 8 | "name": "20 years fixed", 9 | "rate": "2.8", 10 | "years": "20" 11 | }, 12 | { 13 | "name": "15 years fixed", 14 | "rate": "2.5", 15 | "years": "15" 16 | } 17 | ] --------------------------------------------------------------------------------