Create a Profit and Loss Calculator using JavaScript

In this article, we will create a profit & loss calculator using HTML, CSS & Javascript for adding the basic functionality along with adding the design and layout. Profit and Loss Calculator is basically used to calculate the amount or percentage received after selling a particular price or goods. If the amount(Selling Price) received is greater after selling than the actual amount(Cost Price), it is considered profit otherwise loss. We will denote cost price as CP & selling price as SP.

Formula Used:

Profit: (SP) – (CP)
Profit Percentage: Profit/CP x 100
Loss: (SP) – (CP)
Loss Percentage: Loss/CP x 100

Approach:

In the body tag, create the design and layout of the calculator using basic HTML.
Use CSS properties for stylings such as alignment, size, background, etc.
To calculate profit and loss call a function using JavaScript.

Example: We will use the above approach to create a calculator.

HTML

<div class="plcalculate"> 

    <h1>Profit and Loss Calculator</h1> 

    <p> 

        Cost Price(CP) : 

        <input class="cost__price" type="number" /> 

    </p> 

    <p> 

        Selling Price(SP) : 

        <input class="selling__price" type="number" /> 

    </p> 

    <button onclick="Calculate()">Calculate</button> 

    <h2 class="profit__loss"></h2> 

    <h2 class="profit__loss__percentage"></h2> 

    <h2 class="nothing"></h2> 

</div>

CSS Code:

CSS

body { 

  background-color: rgb(99, 226, 99); 

  font-family: Verdana; 
} 
.plcalculate { 

  text-align: center; 

  background-color: rgb(102, 155, 22); 

  width: 500px; 

  margin-left: auto; 

  margin-right: auto; 

  padding: 10px; 
} 

h2 { 

  color: white; 
}

Javascript:

Javascript

function Calculate() { 

  const CP = document.querySelector(".cost__price").value; 

  const SP = document.querySelector(".selling__price").value; 

  const profit__loss = document.querySelector(".profit__loss"); 

  const percentage = document.querySelector(".profit__loss__percentage"); 

  const nothing = document.querySelector(".nothing"); 

  profit__loss.innerHTML = ""; 

  percentage.innerHTML = ""; 

  nothing.innerHTML = ""; 

  if (SP > CP) { 

    const profit = SP - CP; 

    const profit_percent = ((profit / CP) * 100).toFixed(2); 

    profit__loss.innerHTML = "Profit : " + profit; 

    percentage.innerHTML = "Profit Percentage : " + profit_percent; 

  } 

  if (SP < CP) { 

    const loss = CP - SP; 

    const loss_percent = ((loss / CP) * 100).toFixed(2); 

    profit__loss.innerHTML = "Loss : " + loss; 

    percentage.innerHTML = "Loss Percentage : " + loss_percent; 

  } 

  if (SP == CP) { 

    nothing.innerHTML = "No Profit No Loss"; 

  } 
};

Explanation: A Calculate() function will be invoked when the user enters the CP and SP amount in the input and clicks the Calculate button using the onclick event attribute. In this function, we have used DOM querySelector() method to select the value entered in the inputs into a variable using their class names. If the SP amount is greater than the CP amount then Calculate() function will calculate the profit and profit percentage otherwise calculate the loss and loss percentage using the above-mentioned formulae and displayed the text using the innerHTML property.

Complete Code:

HTML

<!DOCTYPE html> 

<html lang="en"> 

<head> 

    <title>Profit and Loss Calculator</title> 

    <style> 

        body{ 

            background-color: rgb(99, 226, 99); 

            font-family: Verdana; 

        } 

        .plcalculate{ 

            text-align: center; 

            background-color: rgb(102, 155, 22); 

            width: 500px; 

            margin-left: auto; 

            margin-right: auto; 

            padding: 10px; 

        } 

        h2{ 

            color: white; 

        } 

    </style> 

</head> 

<body> 

    <div class="plcalculate"> 

        <h1>Profit and Loss Calculator</h1> 

        <p>Cost Price(CP)   : 

            <input class="cost__price" type="number"  /> 

        </p> 

        <p>Selling Price(SP)   : 

            <input class="selling__price" type="number" /> 

        </p> 

        <button onclick="Calculate()">Calculate</button> 

        <p> 

              <h2 class="profit__loss"></h2> 

            <h2 class="profit__loss__percentage"></h2> 

            <h2 class="nothing"></h2> 

        </p> 

    </div> 

    <script> 

        function Calculate(){ 

        const CP= document.querySelector(".cost__price").value; 

        const SP= document.querySelector(".selling__price").value; 

        const profit__loss=document.querySelector(".profit__loss"); 

        const percentage=document.querySelector(".profit__loss__percentage"); 

        const nothing=document.querySelector(".nothing"); 

        profit__loss.innerHTML=""; 

        percentage.innerHTML=""; 

        nothing.innerHTML=""; 

        if(SP>CP){ 

            const profit=SP - CP; 

            const profit_percent= ((profit/CP)*100).toFixed(2); 

            profit__loss.innerHTML="Profit : "+ profit; 

            percentage.innerHTML="Profit Percentage : "+ profit_percent; 

        } 

        if(SP<CP){ 

            const loss=CP - SP; 

            const loss_percent= ((loss/CP)*100).toFixed(2); 

            profit__loss.innerHTML="Loss : "+ loss; 

            percentage.innerHTML="Loss Percentage : "+ loss_percent; 

        } 

        if(SP==CP){ 

            nothing.innerHTML="No Profit No Loss"; 

        } 

    } 

    </script> 

</body> 

</html>

Output:

Article Tags :

CSS

HTML

JavaScript

Web Technologies