Bodybeast Kalorienrechner

by shapeshifta

HTML

<h1 class="logo">Body Beast</h1>
    <ul>
        <li>
            <label for="phase">Body Beast Phase</label>
            <select id="phase" class="insert">
                <option value="buildBulk">Build oder Bulk</option>
                <option value="beast">Beast</option>
            </select>
        </li>
        <li>
            <label for="weight">Gewicht (Pfund)</label>
            <input type="text" class="insert" value="200" id="weight" />
        </li>
        <li>
            <label for="bf">Körperfett (%)</label>
            <input type="text" class="insert" value="15" id="bf" />
        </li>
    </ul>
    
    <ul>
        
        <li>
            <label for="lbm">Lean Body Mass</label>
            <input type="text" id="lbm" readonly="readonly" />
        </li>
        <li>
            <label for="rmr">Resting Metabolic Rate (RMR)</label>
            <input type="text" id="rmr" readonly="readonly" />
        </li>
        <li>
            <label for="cmr">Caloric Modification for Recovery (CMR)</label>
            <input type="text" id="cmr" readonly="readonly" />
        </li>
        <li>
            <label for="rmr2">Resting Metabolic Rate Modified for Recovery (RMR2)</label>
            <input type="text" id="rmr2" readonly="readonly" />
        </li>
        <li>
            <label for="cim">Gewicht halten (CIM)</label>
            <input type="text" id="cim" readonly="readonly" />
        </li>
        <li>
            <label for="multi">Multiplikator für Phase</label>
            <input type="text" id="multi" readonly="readonly" />
        </li>
        <li>
            <label class="bold" for="ct">Dein Kalorienziel</label>
            <input type="text" id="ct" readonly="readonly" />
        </li>
    </ul>

CSS

body{font:14px Arial;background:#000;width:700px;color:#fff}
.logo{background:url(http://purededication.net/files/2012/05/body-beast.jpg);text-indent:-9999px;height:101px;width:234px;margin-bottom:20px}
ul{margin:0; padding:0 1em 1em;width:600px }  
label{display:block; float:left; margin-top:16px; padding-right:1em;width:355px;text-align:right;cursor:pointer}  
input, select{ margin-top:14px; padding:0; vertical-align:bottom }  
.bold, strong{font-weight:bold}
.insert{outline:2px solid}
.insert:focus{outline:2px solid #88C63D;transition:.2s}
::selection{color:#fff;background:#8DC53C}
::-moz-selection{color:#fff;background:#8DC53C}

JavaScript

(function($) {
    var bb = bb || {};
    bb.init = function() {
        $('ul').on('change keyup', 'select, input[type="text"]', bb.calculate);
        bb.calculate();
    };
    bb.detectMultiplier = function(phase) {
        var multiplier = 0;
        var bf = parseInt($('#bf').prop('value'), 10);

        if (phase === 'buildBulk') {
            if (bf > 20) {
                multiplier = 0.1;
            } else if (bf > 10 && bf < 20 || bf === 10 || bf === 20) {
                multiplier = 0.15;
            } else if (bf < 10) {
                multiplier = 0.2;
            }
        } else if (phase === 'beast') {
            if (bf > 20) {
                multiplier = -0.2;
            } else if (bf > 10 && bf < 20 || bf === 10 || bf === 20) {
                multiplier = -0.15;
            } else if (bf < 10) {
                multiplier = -0.1;
            }
        }
        return multiplier;
    };
    bb.calculate = function(e) {
        var phase = $('#phase').prop('value'),
            multi = bb.detectMultiplier(phase);

        //(100-body fat percentage)/100 x weight = Lean Body Mass (LBM)
        var lbm = (100 - parseInt($('#bf').prop('value'), 10)) / 100 * parseInt($('#weight').val(), 10);
        $('#lbm').prop('value', lbm.toFixed(2) + ' Pfund');

        //LBM x 10 = Resting Metabolic Rate (RMR)
        var rmr = lbm * 10;
        $('#rmr').prop('value', rmr.toFixed(2) + ' Kalorien');

        //RMR x .3 = Caloric Modification for Recovery (CMR)
        var cmr = rmr * 0.3;
        $('#cmr').prop('value', '+' + cmr.toFixed(2) + ' Kalorien');

        //RMR + CMR = RMR2
        var rmr2 = rmr + cmr;
        $('#rmr2').prop('value', rmr2.toFixed(2) + ' Kalorien');

        //RMR2 + 600 = CIM
        var cim = rmr2 + 600;
        $('#cim').prop('value', cim.toFixed(2) + ' Kalorien');

        //Multiplikator für Phase
        $('label[for="multi"]').html('Multiplikator für <strong>' + $('#phase option:selected').text() + '</strong>');
     ...