JSFiddle - React, Tailwind, and code Playground

Salary Calculator

by Jennifer Perrin

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-wip/css/bootstrap.min.css">
<div class="container">
     <h1>Salary Calculator</h1>

    <p class="lead">If you make...</p>
    <div class="lead">$
        <input id="salary" type="text">
        <div class="btn-group">
            <button type="button" class="btn btn-primary">per year</button>
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span>

            </button>
            <ul class="dropdown-menu">
                <li id="yearSelect"><a href="#">per year</a>
                </li>
                <li id="monthSelect"><a href="#">per month</a>
                </li>
                <li id="hourSelect"><a href="#">per hour</a>
                </li>
            </ul>
        </div>
    </div>
    <p class="lead">You would make about...</p>
    <div id="results">
        <p id="y" class="lead"><span id="year">____</span><span id="yper"> per year</span>
        </p>
        <p id="m" class="lead"><span id="month">$____</span><span id="mper"> per month</span>
        </p>
        <p id="h" class="lead"><span id="hour">$____</span><span id="hper"> per hour</span>
        </p>
    </div>
    <!-- end results-->
</div>
<!-- end container -->
<div id="footer">
    <div class="container">
        <p>* Calculated values are only estimates and assumes a 40 hour/week schedule. Does not include income taxes or any other fees.</p>
    </div>
</div>

CSS

@import url('http://fonts.googleapis.com/css?family=Open+Sans');
 body {
    font: normal 100%"Open Sans", sans-serif;
    color: #2E3640;
    width:90%;
    margin: 0 auto;
}
p {
    font-size:1.3em;
}
h1 {
    margin-bottom: 40px;
}
.container {
    margin-top: 20px;
}
div.lead {
    margin-bottom: 40px;
}
.btn {
    color: #2E3640;
    border: 2px solid #2E3640;
}
.btn:hover, .btn:focus {
    color: #f2f2f2;
    background-color: #2E3640;
    text-decoration: none;
}
.btn-primary {
    color: #ffffff;
    background-color: #376493;
    border-color: #345679;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {
    color: #ffffff;
    background-color: #345679;
    border-color: #345679;
}
.dropdown-menu>li>a:hover {
    background-color: #376493;
}
#results p.lead {
    margin-bottom: 0;
}
#yper {
    color: #C6655E;
}
#hper {
    color: #95CD9C;
}
#mper {
    color: #6DBCDB;
}
input {
    width: 150px;
}
.btn-group {
    margin: 0 0 4px 1px;
}
#footer {
    margin-top: 50px;
    height: 100%;
    background-color: #f5f5f5;
}
#footer p {
    margin: 20px 0;
}

JavaScript

(function ($) {
    /*
     * Allows only valid characters to be entered into input boxes.
     * Note: fixes value when pasting via Ctrl+V, but not when using the mouse to paste
     *      side-effect: Ctrl+A does not work, though you can still use the mouse to select (or double-click to select all)
     *
     * @name     numeric
     * @param    config      { decimal : "." , negative : true }
     * @param    callback     A function that runs if the number is not valid (fires onblur)
     * @author   Sam Collett (http://www.texotela.co.uk)
     * @example  $(".numeric").numeric();
     * @example  $(".numeric").numeric(","); // use , as separator
     * @example  $(".numeric").numeric({ decimal : "," }); // use , as separator
     * @example  $(".numeric").numeric({ negative : false }); // do not allow negative values
     * @example  $(".numeric").numeric(null, callback); // use default values, pass on the 'callback' function
     *
     */
    $.fn.numeric = function (config, callback) {
        if (typeof config === 'boolean') {
            config = {
                decimal: config
            };
        }
        config = config || {};
        // if config.negative undefined, set to true (default is to allow negative numbers)
        if (typeof config.negative == "undefined") {
            config.negative = true;
        }
        // set decimal point
        var decimal = (config.decimal === false) ? "" : config.decimal || ".";
        // allow negatives
        var negative = (config.negative === true) ? true : false;
        // callback function
        callback = (typeof (callback) == "function" ? callback : function () {});
        // set data and methods
        return this.data("numeric.decimal", decimal).data("numeric.negative", negative).data("numeric.callback", callback).keypress($.fn.numeric.keypress).keyup($.fn.numeric.keyup).blur($.fn.numeric.blur);
    };

    $.fn.numeric.keypress = function (e) {
        // get decimal character and...