Initial commit

5 years ago · cf6ab7e7fd
4 changed files with 128 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,7 @@
+.sass-cache
+bower_components
+node_modules
+*.css
+*.pdf
+*.png
+*.css.map
--- a/bower.json
+++ b/bower.json
@ -0,0 +1,6 @@
+{
+  "name": "mortgage",
+  "dependencies": {
+    "bootstrap": "^4.0.0"
+  }
+}
--- a/index.html
+++ b/index.html
@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+     <!-- Custom styles for this template -->
+    <link href="style.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="container">
+
+    <div class="row">
+    <form class="form-mortgage col-md-6 col-md-offset-3">
+    <div class="form-group row">
+      <h2 class="form-mortgage-heading">Mortgage Calculator</h2>
+    </div>
+    <div class="form-group row">
+      <label for="inputPrice">Purchase Price</label>
+      <input type="number" class="wide" id="inputPrice" placeholder="" required autofocus>
+    </div>
+    <div class="form-group row">
+      <label for="inputPayment">Down Payment</label>
+      <input type="number" class="narrow" id="inputPayment" placeholder="" required autofocus>
+      <div class="note">
+        ($12,500)
+      </div>
+    </div>
+    <div class="form-group row">
+      <label for="inputPayment">Mortgage Term</label>
+      <input type="number" class="narrow" id="inputPayment" placeholder="" required autofocus>
+      <div class="note">
+        Years
+      </div>
+    </div>
+    <div class="form-group row">
+      <label for="inputPayment">Interest Rate</label>
+      <input type="number" class="narrow" id="inputPayment" placeholder="" required autofocus>
+      <div class="note">
+        %
+      </div>
+    </div>
+    <div class="form-group row">
+      <label for="inputPayment">Property Tax</label>
+      <input type="number" class="narrow" id="inputPayment" placeholder="" required autofocus>
+      <div class="note">
+        Per Year
+      </div>
+    </div>
+    <div class="form-group row">
+      <label for="inputPayment">Property Insurance</label>
+      <input type="number" class="narrow" id="inputPayment" placeholder="" required autofocus>
+      <div class="note">
+        Per Year
+      </div>
+    </div>
+    <div class="form-group row">
+      <label for="inputPayment">PMI</label>
+      <input type="number" class="narrow" id="inputPayment" placeholder="" required autofocus>
+      <div class="note">
+        %
+      </div>
+    </div>
+    <button class="btn btn-lg btn-primary btn-block" type="submit">Calculate</button>
+    </form>
+
+    </div> <!-- /row -->
+    </div> <!-- /container -->
+
+    <!-- jQuery first, then Tether, then Bootstrap JS. -->
+    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
+  </body>
+</html>
--- a/style.scss
+++ b/style.scss
@ -0,0 +1,39 @@
+@import 'bower_components/bootstrap/scss/bootstrap';
+
+body {
+  padding-top: 40px;
+  padding-bottom: 40px;
+  background-color: #eee;
+  color: #111;
+}
+
+.form-mortgage {
+  .form-mortgage-heading {
+    text-align: center;
+    width: 100%;
+    padding-bottom: 0.5em;
+    border-bottom: 1px solid #333;
+  }
+  border: 1px solid #333;
+  padding: 3em;
+  label {
+    @extend .col-form-label;
+    @extend .col-6;
+    text-align: right;
+  }
+  label::after {
+    content: ':';
+  }
+  .narrow {
+    @extend .col-3;
+  }
+  .note {
+    @extend .col-3;
+    color: #555;
+    font-size: $font-size-base * 0.9;
+    padding-top: $font-size-base * 0.4;
+  }
+  .wide {
+    @extend .col-4;
+  }
+}