Browse Source

Form design

master
Alexander Yakovlev 5 years ago
parent
commit
6e672c6137
  1. 23
      custom.js
  2. BIN
      designs/MortgageCalculator.psd
  3. BIN
      designs/MortgageCalculator_Stage2.psd
  4. BIN
      designs/MortgageCalculator_Stage3.psd
  5. 36
      index.html
  6. 28
      style.scss

23
custom.js

@ -0,0 +1,23 @@
jQuery(function($){
let currency = {
"autoGroup": true,
"prefix": "$",
"groupSeparator": ',',
"rightAlign": false
};
$("#inputPrice").inputmask('numeric', currency);
$("#inputTax").inputmask('numeric', currency);
$("#inputInsurance").inputmask('numeric', currency);
$("#inputMortgage").inputmask('numeric', {
"rightAlign": false
});
$("#inputPayment").inputmask('percentage', {
"rightAlign": false
});
$("#inputPMI").inputmask('percentage', {
"rightAlign": false
});
$("#inputInterest").inputmask('percentage', {
"rightAlign": false
});
});

BIN
designs/MortgageCalculator.psd

Binary file not shown.

BIN
designs/MortgageCalculator_Stage2.psd

Binary file not shown.

BIN
designs/MortgageCalculator_Stage3.psd

Binary file not shown.

36
index.html

@ -5,6 +5,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="style.css" rel="stylesheet">
</head>
@ -12,57 +13,55 @@
<div class="container">
<div class="row">
<form class="form-mortgage col-md-6 col-md-offset-3">
<form class="form-mortgage">
<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>
<input type="text" class="wide" min="0" 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>
<input type="text" class="narrow" size="6" min="0" id="inputPayment" placeholder="" required>
<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>
<label for="inputMortgage">Mortgage Term</label>
<input type="text" class="narrow" min="0" id="inputMortgage" placeholder="" required>
<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>
<label for="inputInterest">Interest Rate</label>
<input type="text" class="narrow" min="0" id="inputInterest" placeholder="" required>
<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>
<label for="inputTax">Property Tax</label>
<input type="text" class="narrow" min="0" id="inputTax" placeholder="" required>
<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>
<label for="inputInsurance">Property Insurance</label>
<input type="text" class="narrow" min="0" id="inputInsurance" placeholder="" required>
<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>
<label for="inputPMI">PMI</label>
<input type="text" class="narrow" min="0" id="inputPMI" placeholder="" required>
<div class="note">
%
</div>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Calculate</button>
<button class="mortgage-btn btn btn-lg btn-primary" type="submit">Calculate</button>
</form>
</div> <!-- /row -->
@ -70,7 +69,12 @@
<!-- 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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/css/inputmask.min.css" integrity="sha256-lIAsuaxpRGnhhPVyxcly6GdqAXS5E6POCZ3NnL0YphM=" crossorigin="anonymous" />
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.min.js" integrity="sha256-HQCkPjsckBtmO60xeZs560g8/5v04DvOkyEo01zhSpo=" crossorigin="anonymous"></script>
<script src="custom.js"></script>
</body>
</html>

28
style.scss

@ -1,3 +1,7 @@
$font-family-sans-serif: "Open Sans", sans-serif;
$border-radius: .3rem;
$brand-primary: #008245;
@import 'bower_components/bootstrap/scss/bootstrap';
body {
@ -8,32 +12,46 @@ body {
}
.form-mortgage {
@extend .col-12;
@extend .col-sm-8;
@extend .col-lg-6;
@extend .offset-sm-2;
@extend .offset-lg-3;
input {
text-align: left;
}
.form-mortgage-heading {
text-align: center;
width: 100%;
padding-bottom: 0.5em;
border-bottom: 1px solid #333;
font-weight: 300;
letter-spacing: 3px;
}
border: 1px solid #333;
padding: 3em;
label {
@extend .col-form-label;
@extend .col-6;
@extend .col-md-6;
text-align: right;
}
label::after {
content: ':';
}
.narrow {
@extend .col-3;
@extend .col-md-3;
}
.note {
@extend .col-3;
@extend .col-md-3;
color: #555;
font-size: $font-size-base * 0.9;
font-size: $font-size-base;
padding-top: $font-size-base * 0.4;
}
.wide {
@extend .col-4;
@extend .col-md-5;
}
.mortgage-btn {
margin: 0 auto;
display: block;
}
}

Loading…
Cancel
Save