mortgage/index.html

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