Payment Calculator - updated

calculate loan payments based on user input

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div style="background:#012f44; padding: 50px;">
  <div id="calc-top" class="behalf-calc">
    <form>
      <div id="input-error">Please enter a number between 300 and 25000</div>
      <span style="margin=right: 10px;">I need to place an order for</span>
      <div class="input-group"><span style="color:#02A093;">$</span>
        <input type="text" id="orderAmt" onpaste="return false">
      </div>
      <br><span>I would like to spread my costs for this order over</span>
      <select name="terms-days" id="duration">
        <option disabled='disabled' selected='selected' value=""></option>
        <option value="180">180 Days</option>
        <option value="150">150 Days</option>
        <option value="120">120 Days</option>
        <option value="90">90 Days</option>
        <option value="60">60 Days</option>
        <option value="45">45 Days</option>
        <option value="30">30 Days</option>
      </select> <span>and have my account debited</span>
      <select name="debit-term" id="debitFreq">
        <option disabled='disabled' selected='selected'></option>
        <option value="7">Weekly</option>
        <option value="30">Monthly</option>
      </select><span>.</span>
    </form>
  </div>

  <div id="calc-bottom" class="behalf-calc">
    <span>We will advance your order payment today, and debit you</span>
    <div class="calc-output-wrapper">
      <span class="calc-output">$</span>
      <span class="calc-output" id="outputAmt">0</span>
      <span>/</span>
      <span class="calc-output" id="outputTerm1">week</span>
    </div>
    <span>for</span>
    <div class="calc-output-wrapper">
      <span class="calc-output" id="numPayments">0</span>&nbsp;
      <span class="calc-output" id="outputTerm2">weeks</span>
      <span>.</span>
    </div>
  </div>

</div>

CSS

* {
  text-align: center;
}

body {
  background: #012f44;
}

input,
select {
  border: none;
}

#calc-top {
  position: relative;
}

#calc-bottom {
  margin: 55px auto 0;
  max-width: 65%;
  display: none;
}

.behalf-calc span {
  font-family: "Gotham SSm A", "Gotham SSm B", sans-serif;
  font-weight: 300;
  text-align: center;
  max-width: 860px;
  margin: 0 auto 70px;
  line-height: 54px;
  color: #FFF;
  font-size: 20px;
  padding-bottom: 0;
}

.behalf-calc a {
  border-bottom: 4px dotted #02A093;
  display: inline-block;
  color: #02A093;
  transition: .4s all;
  line-height: 44px;
}

.behalf-calc a:hover {
  color: #03736e;
  border-bottom: 4px dotted #03736e;
}

#calc-top span {
  color: #D1D2D5;
}

#calc-bottom span {
  color: #FFF;
}

#calc-bottom span {
  line-height: 40px;
}

.calc-output {
  color: #35AC46 !important;
  display: inline-block;
  margin: 0 0 10px !important;
}

.behalf-calc i {
  font-size: .5em;
  line-height: 0px;
  bottom: 5px;
  padding-right: 5px;
  position: relative;
}

.calc-annotation {
  font-size: 13px !important;
  line-height: normal !important;
  margin: 65px auto 100px;
  color: #98A8AF;
}

.input-group {
  display: inline-block;
  border-bottom: 4px dotted #02A093;
  margin-left: 15px;
  position: relative;
}

#calc-top form input,
#calc-top form select {
  display: inline-block;
  width: 140px;
  margin: 0 0 0 10px;
  border-bottom: 0;
  display: inline-block;
  color: #02A093;
  transition: .4s all;
  line-height: 44px;
  outline: none;
  background: transparent;
  padding: 0 !important;
  font-size: 20px;
  font-family: "Gotham SSm A", "Gotham SSm B", sans-serif;
  font-weight: 300;
}

#calc-top .input-group:after {
  content: '.';
  position: absolute;
  bottom: 10px;
  right: -10px;
  color: #D1D2D5;
  font-family: "Gotham SSm A", "Gotham SSm B", sans-serif;
  font-weight: 300;
  font-size: 20px;
}

#calc-top form select {
  width: 140px;
  border-bottom: 4px dotted #02A093 !important;
  box-shadow: none...

JavaScript

jQuery(document).ready(function($) {
  // add comma separators for thousands
  $('#orderAmt').keyup(function(event) {
    // skip for arrow keys
    if (event.which >= 37 && event.which <= 40) return;
    // format number
    $(this).val(function(index, value) {
      return value
        .replace(/\D/g, "")
        .replace(/\B(?=(\d{3})+(?!\d))/g, ",")
    });
    var converted = parseInt($('#orderAmt'), 10);
  });

  // show output div only if order amount is between 300 and 25000
  $('#calc-top').bind('keyup change', function() {
  	var orderAmount = $('#orderAmt').val().replace(new RegExp(','), '');
    if (orderAmount >= 300 && orderAmount <= 25000 && $("#duration option:selected").val() !== "" && $("#debitFreq option:selected").val() !== "") {
      $('div#calc-bottom').css('display', 'block');
    } else {
      $('div#calc-bottom').css('display', 'none');
    }
  });

  // show inline error message if user enters invalid number
  $('#orderAmt').bind('keyup change', function() {
  	var orderAmount = $(this).val().replace(new RegExp(','), '');
    
    if (orderAmount >= 300 && orderAmount <= 25000 || orderAmount == 0) {
      $('#input-error').css('display', 'none');
    } else {
      $('#input-error').css('display', 'block');
    }
  });

})

// CALCULATE USER INPUT AND WRITE OUTPUT TO HTML ELEMENTS 
function calculate() {
	
  // define variables
  var orderAmt = $('#orderAmt').val().replace(new RegExp(','), '');
  var duration = document.getElementById("duration").value || 0;
  var debitFreq = document.getElementById("debitFreq").value || 0;
  var outputAmt = document.getElementById('outputAmt') || 0;
  var numPayments = document.getElementById('numPayments') || 0;

  // CALCULATE NUMBER OF PAYMENTS
  if (debitFreq == 7) {
    numPayments = Math.floor(duration / 7);
  } else if (debitFreq == 30) {
    numPayments = Math.floor(duration / 30);
  }
  document.getElementById('numPayments').innerHTML = numPayments;

  // THE ACTUAL CALCULATION
  var stepA =...