JSFiddle - React, Tailwind, and code Playground

by orolo

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/redmond/jquery-ui.css">
<div class="ui-widget">
    <div class="ui-widget-header">
        How Many Bags Do I Need?    </div>
    <br />
    <div class="ui-widget-content">
        <label for="amount-length">Dike length (in feet):</label><br />
        <input type="text" id="amount-length" style="border:0; color:#f6931f; font-weight:bold;" />
        <br />
        <div class="length-slider"></div>
        <br />
        <label for="amount">Dike height (in feet):</label><br />
        <input type="text" id="amount-height" style="border:0; color:#f6931f; font-weight:bold;" />
        <br />
        <br />
        <div class="height-slider"></div>
        <br />
        <labe for="calculate">Calculate</label><br />
            <input type="submit" id="calculate">
        </div>
        </div>

CSS

#demo-frame > div.demo { padding: 10px !important; }

.ui-widget-content {
    padding: 10px;  
}

.length-slider, .height-slider {
    padding: 0;
}

JavaScript

function calculator(height, len) {
    var H = height,
        L = len,
        
       // (9H (squared) + 3H) X L
       //        2 
        // John, the formula is on the next line:
        
        total = ((((9 * H) * (9 * H)) + 3 * H) / 2) * L;
    
    
    
    return total;
}

$(".length-slider").slider({
    value: 20,
    min: 0,
    max: 100,
    step: 1,
    slide: function(event, ui) {
        $("#amount-length").val(ui.value);
    }
});
$("#amount-length").val($(".length-slider").slider("value"));

$(".height-slider").slider({
    orientation: 'vertical',
    value: 5,
    min: 0,
    max: 5,
    step: 1,
    slide: function(event, ui) {
        $("#amount-height").val(ui.value);
    }
});
$("#amount-height").val($(".height-slider").slider("value"));

$("button#calculate").button();
$("#calculate").click(function() {
    var height = $('.height-slider').slider("value"),
        length = $('.length-slider').slider("value");

    alert('height of dike = ' + height + ' length of dike = ' + length)

    alert('total bags needed = ' + calculator(height, length));
});


//alert(calculator(($('.height-slider').slider("value")), ($('.length-slider').slider("value"))));