Paint Tin Calculator

by andyjh07

HTML

<div id="Form">
    <div id="FormHolder">
        <div id="Inputs">
            <div id="X"></div>
            <div id="HolderLeft">
                <p>Width(cm)</p>
                <input type="text" id="width" value="0" name="width">
            </div>
            <div id="HolderRight">
                <p>Height(cm)</p>
                <input type="text" id="height" value="0" name="height">
            </div>
            <div class="clearfix"></div>
            <div id="Calculations">
                <p>That works out to be <span id="SquareMetres">0</span> Square metres. You require <span id="Tins">0</span> tins of paint to cover that space. It'll cost you <span id="Price">£0.00</span>.</p>
            </div>
        </div>
    </div>
</div>

JavaScript

$(document).ready(function () {
    // Calculation Scripts
    // Square Metres
    var output = $('#SquareMetres'),
        tinoutput = $('#Tins'),
        priceoutput = $('#Price');
    $('input[type="text"]').keyup(function () {
        var width = parseFloat($('#width').val()),
            height = parseFloat($('#height').val()),
            result = height * width / 10000,
            finalresult = result.toFixed(2);
        if (isNaN(result)) return;

        output.text(finalresult);

        // Tins
        var tinmetres = 32.5,
            tinprice = 18.23,
            tinsresult = finalresult / tinmetres;
        tinstotal = tinsresult.toFixed(2);

        tinoutput.text(Math.ceil(tinstotal));

        var price = Math.ceil(tinstotal) * tinprice,
            totalprice = price.toFixed(2);

        priceoutput.text('£' + totalprice)

    });
});