Tile Calculator

by wrxsti85

HTML

<div class="calculator">
    <h4>Tile Quantity Estimator</h4>
    <div class="errors" style="visibility: hidden;"></div>
    <div class="calculator-form">
        <fieldset id="calculatorLength">
            <legend class="label">Length (ft):</legend>
            <input type="text" class="textbox" id="areaLength" value="12" name="areaLength" />
        </fieldset> <i class="fa fa-times"></i>

        <fieldset id="calculatorWidth">
            <legend class="label">Width (ft):</legend>
            <input type="text" class="textbox" id="areaWidth" value="12" name="areaWidth" />
        </fieldset>
    </div>
    <div class="calculator-form">
        <fieldset id="calculatorCoverageArea">
            <legend class="label">Square Footage :</legend>
            <input type="text" class="textbox" id="area" readonly="readonly" value="144" name="textBoxArea" /> <span>square feet will need</span>

        </fieldset>
        <fieldset id="calculatorTileNeeded">
            <legend class="label">Boxes Needed :</legend>
            <input type="text" class="textbox" id="tileNeeded" readonly="readonly" value="15" name="textBoxTileNeeded"> <span>boxes.</span>

        </fieldset>
    </div>
</div>

JavaScript

var timeCalc = function(){
    var length = $("input[id='areaLength']").val();
    var width = $("input[id='areaWidth']").val();
    var minbuy = 0;
    var area = length * width;
    var coverage = 7;
    if(coverage > 0){
        minbuy = Math.ceil(area / coverage);
    }
    $("input[id='area']").val(area);
    $("input[id='tileNeeded']").val(minbuy);

    var addToBasketButtonLabel = $("input[id='buttonCalculatorCartLabel']").val();
    $("input[name='buttonCalculatorCart']").val(addToBasketButtonLabel.replace("{0}", minbuy));
};

$('.textbox').on('change', function(){
    timeCalc();
});