Browse Source

Initial commit

master
Alexander Yakovlev 5 years ago
commit
cf6ab7e7fd
  1. 7
      .gitignore
  2. 6
      bower.json
  3. 76
      index.html
  4. 39
      style.scss

7
.gitignore vendored

@ -0,0 +1,7 @@
.sass-cache
bower_components
node_modules
*.css
*.pdf
*.png
*.css.map

6
bower.json

@ -0,0 +1,6 @@
{
"name": "mortgage",
"dependencies": {
"bootstrap": "^4.0.0"
}
}

76
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>

39
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;
}
}
Loading…
Cancel
Save