In this tutorial, I’m building a calculator that works out the gross profit percent, gross margin percent and the profit from a sell and unit price. Going another step further I’ll have a form that will automatically calculate these as soon as the sell and buy price has been inputted using jQuery.

# Getting the maths out of the way

Sample data:
sell price = 75
profit = 35 (Sell price – Buy price)

## Work out the gross profit

The Gross Profit is the profit divided by the sell price times 100 so the formula is:
profit / sell price * 100

(In this example using the figures above)

``gross profit = 35/75*100``

## Work out Gross Margin Percent:

The margin is 100 times sell price minus the buy price divided by the buy price so the formula is
100 * (sell price - buy price) / price cost

(In this example using the figures above)

``gross margin = 100 * (75 - 40) / 40``

# Building the table structure

``````<table>
<tr>
<th>Sell Price &pound;</th>
<th>Gross Profit %</th>
<th>Gross Margin %</th>
<th>Profit &pound;</th>
</tr>
<tr>
<td><input class='item sellprice' type='number' value='0'></td>
</tr>
</table>``````

this is a standard table but a few important points to mention:

• The last three columns are read only and won’t be touched directly.
• The first two columns have a class of item this is used to determine if either column has been changed.
• Each input has it’s own class to identify input.

# Performing the calculations with jQuery

``````<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
\$(function() {

\$(document).on("change", ".item", function () {

var sellprice = \$('.sellprice').val();

if (sellprice > 0 && buyprice > 0) {

var profit      = sellprice - buyprice;
var grossProfit = profit / buyprice * 100;
var grossMargin = 100 * (sellprice - buyprice) / sellprice;

\$('.grossProfit').val(grossProfit.toFixed(2));
\$('.grossMargin').val(grossMargin.toFixed(2));
\$('.profit').val(profit);

}

});

});
</script>``````

Create a trigger that listens for changes, by using the change event on the document, this will then trigger the closure to run when there is a change on either the sell or buy price since they both have a class of item.

Create variables that read directly from the input for both sell and buy price.

Next, as long as both sell and buy price is more than 0 run the calculations.

Setup the 3 calculations passing in the variables, lastly add the totals of the calculations to the inputs append .toFixed(2) to round the decimals to only 2 digits.

That’s it, with this setup after entering a buy and sell price the gross profit percent, gross margin percent and profit will be calculated and displayed in the inputs.