JSFiddle - React, Tailwind, and code Playground

by thai

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<form class="form-horizontal">
    <fieldset>
        <legend>Input</legend>
        <div class="control-group">
            <label class="control-label" for="rlm">Real Time</label>
            <div class="controls">
                <input type="text" class="input-large" id="rlm" placeholder="real time (minutes)" value="30">
            </div>
        </div>
    </fieldset>
</form>

<table class="table table-bordered">
    <thead>
        <th></th>
        <th>20 hours</th>
        <th>24 hours</th>
    </thead>
    <tbody>
        <tr>
            <th rowspan="2">10 minutes in game in real-life</th>
            <td><span data-output="10*n/20">n</span> seconds</td>
            <td><span data-output="10*n/24">n</span> seconds</td>
        </tr>
        <tr>
            <td><span data-output="10*n/20*20">n</span> frames</td>
            <td><span data-output="10*n/24*20">n</span> frames</td>
        </tr>
    </tbody>
</table>

CSS

body {
    padding: 20px;
}
table.table tbody tr td { text-align: center; }
td span { display: block; font: 15px Consolas, Monaco, sans-serif; }

JavaScript

/*
1 game day = h game hours = h * 60 game minutes = n real-life minutes
therefore, (game / real-life) = (h * 60 / n)
therefore, 10 game minutes = 10 * n / h / 60 real-life minutes
                           = 10 * n / h      real-life seconds
                           = 10 * n / h * 20 real-life frames
*/

function update() {
    var n = parseFloat($('#rlm').val());
    $('[data-output]').each(function() {
        $(this).html((1 * eval($(this).attr('data-output'))).toFixed(2).replace(/\.0*$/,'').replace(/(\.\d+)0+/, '$1'));
    });
}

update();
$('#rlm').keyup(update).change(update);