JSFiddle - React, Tailwind, and code Playground

by yourbudweiser

HTML

<section id="calculator-section">
  <div class="container">
    <div id="calculator-amortization" class="calculator-wrapper">
      <div class="form-wrapper">  
        <ul id="form-fields" class="form list-unstyled">
          <li>
            <label>Start Date:</label>
            <select class="span3" id="month">
              <option label="Jan" value="1" selected="selected">Jan</option>
              <option label="Feb" value="2">Feb</option>
              <option label="Mar" value="3">Mar</option>
              <option label="Apr" value="4">Apr</option>
              <option label="May" value="5">May</option>
              <option label="Jun" value="6">Jun</option>
              <option label="Jul" value="7">Jul</option>
              <option label="Aug" value="8">Aug</option>
              <option label="Sep" value="9">Sep</option>
              <option label="Oct" value="10">Oct</option>
              <option label="Nov" value="11">Nov</option>
              <option label="Dec" value="12">Dec</option>
            </select>
            <select id="year"></select>
          </li>
          <li class="accrue accrue-field-amount">
            <label>Loan Amount:</label>
            <div class="input-group">
              <span class="input-group-addon">$</span>
              <input id="amount" type="text" class="form-control amount" value="0">
            </div>
          </li>
          <li class="accrue accrue-field-rate">
            <label>Annual Interest Rate:</label>
            <div class="input-group">
              <input id="interest" type="text" class="form-control rate" value="0">
              <span class="input-group-addon">%</span>
            </div>
          </li>
          <li class="accrue accrue-field-term">
            <label>Term:</label>
            <div class="input-group">
              <select id="term-years" class="form-control  term">
                <option value="30">30 Years</option>
                <option value="20">20...

JavaScript

jQuery(function ($) {

    // Digits to round to
    var ROUND_DIGITS = true;
    var DIGIT_PRECISION = 0;

    // Display formatting function to change from spaces to commas
    // x: Value to apply seperator/grouping on.
    // sep (String): Seperator to use, if not specified, defaults to ','
    // grp (int): Grouping of numbers, if not specified, defaults to 3
    function localeString(x, sep, grp) {
        var sx = ('' + x).split('.'), s = '', i, j;
        sep || (sep = ','); // default seperator
        grp || grp === 0 || (grp = 3); // default grouping
        i = sx[0].length;
        while (i > grp) {
            j = i - grp;
            s = sep + sx[0].slice(j, i) + s;
            i = j;
        }
        s = sx[0].slice(0, i) + s;
        sx[0] = s;
        return sx.join('.')
    }

    function convert_month(month) {
        if (month == 1) { month = "January"; }
        else if (month == 2) { month = "February"; }
        else if (month == 3) { month = "March"; }
        else if (month == 4) { month = "April"; }
        else if (month == 5) { month = "May"; }
        else if (month == 6) { month = "June"; }
        else if (month == 7) { month = "July"; }
        else if (month == 8) { month = "August"; }
        else if (month == 9) { month = "September"; }
        else if (month == 10) { month = "October"; }
        else if (month == 11) { month = "November"; }
        else if (month == 12) { month = "December"; }
        return month;
    }

    function calculate_monthly_payment() {
        // setting these as local variables...easier to read vs huge parse float equations.
        var loan_amount = parseFloat($('#amount').val());
        var interest_rate = parseFloat($('#interest').val()) / 100;
        var monthly_interest_rate = interest_rate / 12;
        var length_of_mortgage = parseInt($('#term-years').val()) * 12;

        if ($('select[id=monthly-yearly]').val() == 'months') {
            length_of_mortgage =...