JSFiddle - React, Tailwind, and code Playground

by dhoerster

HTML

<table id='calcTable'>
    <tr>
        <td><input class='textBox' type='text' id='stdUser' value='0' /></td>
        <td><span>&lt;&lt;</span></td>
        <td><p><strong>Standard Users</strong></p><p>$6/user/month</p><p>$60/user/year</p></td>
        <td rowspan='2'><button id='btnCalc'>CALCULATE</button></td>
    </tr>
    <tr>
        <td><input class='textBox' type='text' id='advUser' value='5' /></td>
        <td><span>&lt;&lt;</span></td>
        <td><p><strong>Advanced Users</strong></p><p>$55/user/month</p><p>$550/user/year</p></td>
        <td></td>
    </tr>
</table>

<div class='priceMins'><p>5 Advanced User minimum, 2 GB storage included</p></div>

<table>
    <tr>
        <td class='col colA'>Monthly<p id='monthSub'>$</p></td>
        <td class='col colB'>Annually<p id='annSub'>$</p></td>
        <td class='col colC'>Subscription includes support, hosting, backups, upgrades, and training</td>
    </tr>
    <tr>
        <td class='col colA'>FREE</td>
        <td class='col colB'>FREE</td>
        <td class='col colC'>Read-only access</td>
    </tr>
    <tr>
        <td class='tablecellTotal tableCellTotalAB'><p id='monthTotal'>$</p></td>
        <td class='tablecellTotal tableCellTotalAB'><p id='annTotal'>$</p></td>
        <td class='tablecellTotal tableCellTotalC'>&lt; Total</td>
    </tr>
</table>

<hr/>

<div class='priceMins'><p>Prices and conditions are subject to change</p></div>

CSS

#calcTable td {
    padding: 5px 10px;
}
.priceMins{
    font-family: Verdana, Helvetica, sans-serif;
    font-size: .7em;
    color: #666;
    margin: 10px 10px 20px 10px;
}
p>strong,span>strong {
    color: #000;
    font-weight: bold;
}
.blockDiv{
    display: inline-block;
    vertical-align: middle;
}
.blockDivLayout{
    width: 250px;
    height: 125px;
}
.blockDivSection{
    vertical-align: middle;
    height: 50%;
}
td{
    font-family: Verdana, Helvetica, sans-serif;
    font-size: .7em;
    color: #666;
}
td.col{
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: #AAA;
    padding: 0 0 3px 0;
    height: 50px;
}
td.colA{
    width:100px;
    background-color: #DDD;
    text-align: center;
    v-align: middle;
}
td.colB{
    width: 100px;
    background-color: #EEE;
    text-align: center;
    v-align: middle;
}
td.colC{
    width: 150px;
    background-color: #FFF;
    text-align: left;
    v-align: middle;
    padding: 0 0 0 4px;
}

td.tablecellTotal{
    height: 80px;
    font-family: Trebuchet, Helvetica, sans-serif;
    font-size: 1.1em;
    color: #111;
}
td.tableCellTotalAB{
    text-align: center;
    v-align: middle;
}
td.tableCellTotalC{
    text-align: left;
    v-align: middle;
}

.textBox {
    background-color: #FFB;
    height: 30px;
    width: 80px;
    border-style: solid;
    border-width: 1px;
    text-align: center;
    font-size: 1.5em;
    color: #666;
}
button{
    background-color: #DDD;
    font-family: Verdana, Arial, sans-serif;
    font-size: .9em;
    border-style: solid;
    height: 30px;
    border-radius: 10px;
}
button:hover{
    background-color: #AAA;
    cursor: pointer;
}
.buttonToClick{
    background-color: #C00;
}

JavaScript

var standardMonthCost = 6,
    standardAnnCost = 60,
    advMonthCost = 55,
    advAnnCost = 550,
    totalMonth, totalAnnual, $stdUser, $advUser;

function init() {
    $stdUser = $("#stdUser").val();
    $advUser = $("#advUser").val();
}

function getMonthlyCost() {
    return (($stdUser * standardMonthCost) + ($advUser * advMonthCost));
}

function getAnnualCost() {
    return (($stdUser * standardAnnCost) + ($advUser * advAnnCost));
}

$(document).ready(function() {
    init();
    totalMonth = getMonthlyCost();
    totalAnnual = getAnnualCost();

    $("#monthSub,#monthTotal").text('$' + totalMonth);
    $("#annSub,#annTotal").text('$' + totalAnnual);
    $("#stdUser,#advUser").click(function() {
        $(this).focus().select();
    }).change(function() {
        if (isNaN($(this).val())) {
            $(this).val(0);
            alert('Please enter a number');
        } else {
            $('#btnCalc').addClass('buttonToClick');
        }
    }).keypress(function(e) {
        var code = (e.keyCode ? e.keyCode : e.which);
        if (code == 13) {
            $("#btnCalc").click();

        }
    });
    $("#btnCalc").click(function(e) {
        e.preventDefault();
        init();

        if ($advUser < 5) {
            alert('5 Advanced User minimum');
            $('#advUser').val(5);
            init();
        }
        totalMonth = getMonthlyCost();
        totalAnnual = getAnnualCost();

        $("#monthSub,#monthTotal").text('$' + totalMonth);
        $("#annSub,#annTotal").text('$' + totalAnnual);
        $(this).removeClass('buttonToClick');
    });
});