Create a Profit and Loss Calculator using JavaScript - GeeksforGeeks

10 Oct, 2021
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:
CSS-Properties
CSS-Questions
HTML-Questions
JavaScript-Methods
JavaScript-Questions
CSS
HTML
JavaScript
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Design a web page using HTML and CSS
Form validation using jQuery
How to set space between the flexbox ?
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
How to set input type date in dd-mm-yyyy format using HTML ?
HTML | <img> align Attribute
Form validation using HTML and JavaScript
How to set the default value for an HTML <select> element ?