rates table ex code

by Shahvaiz Hanif

HTML

<div class="container-wide">
    <div id="tabs">
        <ul id="form-tabs">
            <li><a href="#tabs-1">Mortgage Rates</a>
            </li>
            <li><a href="#tabs-2">Payment Calculator</a>
            </li>
        </ul>
        <div id="tabs-1">
            <div class="sidebar">
                <h6>Loan Input Form</h6>
                <hr>
                <form id="mainForm">
                    <div id="credit-box">
                        <label>Credit Score</label>
                        <div id="circles-slider"></div>
                    </div>
                    <div id="loan_type_box">
                        <label for="id_loan_type">Loan Type</label>
                        <select class="dropdown" id="id_loan_type" name="loan_type" onchange="yesNo();">
                            <option value="refi_rate_term">Refi: Rate &amp; Term</option>
                            <option value="refi_cash_out">Refi: Cash Out</option>
                            <option value="purchase">Purchase</option>
                        </select>
                    </div>
                    <div id="zip_code_box">
                        <label for="id_zip_code">Zip Code</label>
                        <input id="id_zip_code" maxlength="5" name="zip_code" placeholder="Zip Code" type="text" value="20854" />
                    </div>
                    <div id="loan_balance_box">
                        <label for="id_loan_balance">Loan Balance</label>
                        <input id="id_loan_balance" name="loan_balance" placeholder="Current Loan Balance" type="text" value="250000" />
                    </div>
                    <div id="down_payment_box">
                        <label for="id_down_payment">Down Payment</label>
                        <input id="id_down_payment" name="down_payment" placeholder="Down Payment" type="text" value="120000" />
                    </div>
                    <div id="property_value_box">
                     ...

CSS

/* Color Palette */
 @grey-dark: #4d4d4d;
 @light-gray: #e6e6e6;
 @gray-medium: #999999;
 @logo-color: #c42056;
 @gray-border: #ccc;
 @primary: #e49c3e;

/*orange */
 @gray-superdark: #333333;
 @footer-gray: #b3b3b3;
 @extra-light: #d3d3d3;
 @extra-light: #e0e0e0;
 @super-light: #f5f5f5;
 @super-light: #f7f7f7;
 @side-margins: 1%;
 @danger: #d9534f;
 @success: #dff0d8;
 @success: #27ae60;

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
 h1, h2, h3, h4, h5, h6 {
    font-family:'Open Sans', sans-serif;
    margin-top: 0;
    margin-bottom: .5rem;
    font-weightt: 300;
}
h1, h2, h3, h4, h5, h6 {
    font-family:''Open Sans'', sans-serif;
    margin-top: 0;
    margin-bottom: .5rem;
    font-weightt: 300;
}
h1 {
    font-size: 48px;
    line-height: 1.2;
    letter-spacing: -.1rem;
}
h2 {
    font-size: 36px;
    line-height: 1.25;
    letter-spacing: -.1rem;
}
h3 {
    font-size: 30px;
    line-height: 1.3;
    letter-spacing: -.1rem;
}
h4 {
    font-size: 24px;
    line-height: 1.35;
    letter-spacing: -.08rem;
}
h5 {
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -.05rem;
}
h6 {
    font-size: 10px;
    line-height: 1.6;
    letter-spacing: 0;
}
.validation-fonts {
    color: @danger;
    font-weight: bold;
}
.table-font {
    font-family:'Open Sans', sans-serif;
    color: black;
    font-size: 15px;
}
.raleway {
    font-family:'Raleway', sans-serif;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    line-heighttt: 38px;
    letter-spacing: .0rem;
    text-transform: uppercase;
    color: @grey-dark;
    .lnum();
}
/* Larger than phablet */

/*@media (min-width: 550px) {
  h1 { font-size: 5.0rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 3.6rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; }
}*/
 p {
    font-family:"HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.428;
    margin-top: 0;
   ...

JavaScript

$(document).ready(function () {
    // page will load with initial values
    loan_amount_tooltip(); // shows the current loan amount as the user types
    zc_lookup(); // if all values are typed in, the ajax request is sent to retrieve interest rates
    paymentCalculation();
    maskInputValues();

    $('#progressbar').css({
        background: '#ccc'
    });

    $("#id_property_value, #id_loan_type, #id_loan_balance, #id_down_payment, #id_cash_out, #id_zip_code, #id_credit_score, #id_property_type, select, #circles-slider").on("keyup change slidestop", function (event) {

        loan_amount_tooltip();
        zc_lookup(); // if all values are typed in, the ajax request is sent to retrieve interest rates
    });


    $("#id_loan_amount_calculator, #id_interest_rate, #id_months").on("keyup change", function (event) {
        paymentCalculation(); // monthly payment calculator
    });
}); // end of document (function)


function zc_lookup() {

    var zip_flag = 0;
    var zip_message = document.getElementById("zcode");

    if ($('#id_zip_code').val().length >= 1) {

        $.ajax({
            type: "GET",
            url: "/zip_test/",
            data: {
                'zc_check': $('#id_zip_code').val()
            },
            success: function (data) {

                // data is in the following format: a dictionary inside an array inside an array
                // [1, [{"county": "Montgomery"}], [{"state": "maryland"}]]

                if (data[0] == 1) {

                    user_county = data[1][0].county;
                    user_state = data[2][0].state;

                    zip_message.style.display = 'none';

                    field_checks(); // since AJAX is asyncronous, we want to wait for the value to be retured before proceeding; otherwise, the function will continue executing without the returned value
                } else {

                    zip_message.style.display = 'block';
                    searchSuccess(0); // call...