## Table of Contents

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

buy price = 40

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 £</th>
<th>Buy Price £</th>
<th>Gross Profit %</th>
<th>Gross Margin %</th>
<th>Profit £</th>
</tr>
<tr>
<td><input class='item sellprice' type='number' value='0'></td>
<td><input class='item buyprice' type='number' value='0'></td>
<td><input class='grossProfit' readonly type='number' value='0'></td>
<td><input class='grossMargin' readonly type='number' value='0'></td>
<td><input class='profit' readonly 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();
var buyprice = $('.buyprice').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.