Mortgage calculator
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

139 lines
5.2 KiB

<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="text" class="wide" id="inputPrice" placeholder="" value="250000" required autofocus>
</div>
<div class="form-group row">
<label for="inputPayment">Down Payment</label>
<input type="text" class="narrow" size="6" value="5" id="inputPayment" placeholder="" required>
<div class="note">
($<span id="payment-calc"></span>)
</div>
</div>
<div class="form-group row">
<label for="inputMortgage">Mortgage Term</label>
<input type="text" class="narrow" value="30" id="inputMortgage" placeholder="" required>
<div class="note">
Years
</div>
</div>
<div class="form-group row">
<label for="inputInterest">Interest Rate</label>
<input type="text" class="narrow" value="4.25" id="inputInterest" placeholder="" required>
<div class="note">
</div>
</div>
<div class="form-group row">
<label for="inputTax">Property Tax</label>
<input type="text" class="narrow" value="2400" id="inputTax" placeholder="" required>
<div class="note">
Per Year
</div>
</div>
<div class="form-group row">
<label for="inputInsurance">Property Insurance</label>
<input type="text" class="narrow" value="800" id="inputInsurance" placeholder="" required>
<div class="note">
Per Year
</div>
</div>
<div class="form-group row">
<label for="inputPMI">
<abbr title="Private Mortgage Insurance">PMI</abbr>
</label>
<input type="text" class="narrow" value="0.89" id="inputPMI" placeholder="" required>
<div class="note">
</div>
</div>
<button id="calculate-btn" class="mortgage-btn btn btn-lg btn-primary" type="button">Calculate</button>
</form>
<!-- Modal -->
<div class="modal fade" id="estimations" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
&nbsp;
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<h2 class="form-mortgage-heading">Mortgage Estimations</h2>
<div class="row">
<div class="cost-card" id="initial-cost-card">
<div class="cost" id="calculated-cost">$000.00</div>
<div class="subtitle">Total Monthly Payment<span class="hidden"> until <span class="pay-month"></span></span></div>
</div>
<div class="cost-card narrow hidden">
<div class="cost" id="cost-after">$000.00</div>
<div class="subtitle">Total Monthly Payment after <span class="pay-month"></span></div>
</div>
<div class="cost-card narrow hidden">
<div class="cost" id="total">$000.00</div>
<div class="subtitle">Total of <span id="total-payments">000</span> Payments</div>
</div>
<div class="cost-card narrow hidden">
<div class="cost" id="payoff">$000.00</div>
<div class="subtitle">Payoff Date</div>
</div>
</div>
<button type="button" class="mortgage-btn btn btn-primary" type="submit" id="apply">
Apply now!
</button>
<div class="mod-more">
<a href="#" data-toggle="collapse" data-target="#details">
See Payment Details
<br>
<div class="arrow-down"></div>
</a>
</div>
<div class="collapse" id="details">
<div class="card card-block">
<table class="table table-sm table-hover table-striped" id="paymentdetails">
</table>
<button type="button" class="mortgage-btn btn btn-primary" type="submit" id="apply">
Apply now!
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="nameform" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
&nbsp;
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<h2 class="form-mortgage-heading">Leave your contact details</h2>
<form class="form-name">
<div class="form-group row">
<label for="inputPrice">Your name</label>
<input type="text" class="wide" id="inputName" placeholder="" required autofocus>
</div>
<div class="form-group row">
<label for="inputPrice">Your email</label>
<input type="text" class="wide" id="inputEmail" placeholder="" required autofocus>
</div>
<div class="form-group row">
<label for="inputPrice">Your phone</label>
<input type="text" class="wide" id="inputPhone" placeholder="" required autofocus>
</div>
<button type="button" class="mortgage-btn btn btn-primary" type="submit" id="apply2">
Apply now!
</button>
</form>
</div>
</div>
</div>
</div>