PayPal Fee Calculator

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>PayPal Calculator</title>
    </head>
    <body>
        <div id="calculator">
            
            <h1>PayPal Calculator</h1>
            
            <form>
                <div class="row">
                    <label>Invoiced Amount</label>
                    <input type="text" name="amount" value="" id="amount" />
                    <button type="submit">Calculate</button>
                </div>
            </form>
            
            <div id="result">
                <!-- <h2>Result:</h2> -->
                <!-- <p>Out of your total invoiced amount of <span id="total_amount">0</span>, PayPal will take a <span id="paypal_cut"></span> cut, leaving you with a total of <span id="total">0</span>.</p> -->
                
                <table cellspacing="0" width="100%">
                    <tr>
                        <th>Full Amount </th>
                        <th>PayPal's Cut</th>
                        <th>Total Profit</th>
                    </tr>
                    <tr>
                        <td><p id="total_amount"></p></td>
                        <td><p id="paypal_cut"></p></td>
                        <td><p id="total"></p></td>
                    </tr>
                </table>
            </div>
            
        </div>
        
    </body>
</html>

CSS

html {
    min-height:100%;
}
body {
    font: 12px/1 "Helvetica Neue", Arial, Helvetica, Calibri, sans-serif;
    color: #333;
    background-color: #4977a2;
background-image: -moz-linear-gradient(0% 100% 90deg,rgba(255,255,255,0.65), rgba(255,255,255,0.1));
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.1)), to(rgba(255,255,255,0.65)));}

h1,
h2,
p {
    line-height: 1;
    margin: 0;
    padding: 0;
}

#calculator {
    width: 300px;
    margin: 40px auto;
    padding: 20px;
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #cfcfcf;
    border-left: 1px solid #ddd;
    background-color: #ddd;
    box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.85) inset, 0px 2px 3px rgba(0, 0, 0, 0.04);
    -moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.85) inset, 0px 2px 3px rgba(0, 0, 0, 0.04);
    -webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.85) inset, 0px 2px 3px rgba(0, 0, 0, 0.04);
    -o-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.85) inset, 0px 2px 3px rgba(0, 0, 0, 0.04);
    background-image: -moz-linear-gradient(0% 100% 90deg, #ebebeb, #f5f5f5);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ebebeb), to(#f5f5f5));
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -webkit-background-clip: padding-box;
    /* fix webkit rounded corners from showing 2 shaded pixels */
}

.row {
    width: 100%;
    margin: 10px 0;
    position: relative;
    clear: both;
    padding: 1px 0;
    overflow: hidden;
}

.row.active {
    background-color: #efefef;
    border-top: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
    padding: 0;
}

input {
    border: 1px solid #e4e4e4;
    background-color: #fff;
    padding: 4px 5px;
    color: #777;
    font: 11px/1 "Helvetica Neue", Arial, Helvetica, Calibri, sans-serif;
    width: 50px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
   ...

JavaScript

jQuery(document).ready(function($) {

    var rate = {
        perc: 2.9,
        fee: 0.30
    },
        amount = $('#amount'),
        output = {
            amount: $('#total_amount'),
            paypal: $('#paypal_cut'),
            total: $('#total')
        };

    function updateFields(total) {

        var paypal = (total / 100 * rate.perc + rate.fee).toFixed(2);

        output.amount.text('$ ' + total);
        output.paypal.text('$ ' + paypal);
        output.total.text('$ ' + (total - paypal));

    }

    amount.bind('blur', function(e) {
        amount.val(amount.val().match(/\d+\.?\d*/));
    });

    $('form').submit(function(e) {
        e.preventDefault();

        if (amount.val() !== '' && /\d+\.?\d*/gi.test(amount.val())) {

            updateFields(amount.val());

            if ($('#result').is(':hidden')) {
                $('#result').slideDown(400);
            }
            // attach live updater handler to amount field
            amount.bind('blur keyup', function(e) {
                updateFields(amount.val());
            });

        }


    });

});