# Calculate gross profit and gross margin javascript calculator

·

3 min read

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 &amp;pound;</th>
<th>Buy Price &amp;pound;</th>
<th>Gross Profit %</th>
<th>Gross Margin %</th>
<th>Profit &amp;pound;</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 &amp;&amp; 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.

### Did you find this article valuable?

Support David Carr by becoming a sponsor. Any amount is appreciated!