- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Create a Profit and Loss Calculator using HTML, CSS, and JavaScript?
In this article, we are going to create a calculator using JavaScript We will be using the basic math formulas to calculate the profit and loss. We will be returning the result in percentage along with the actual values.
To calculate the Profit and Loss we need two things that are: CP (Cost Price) and SP (Selling Price).
Formulas to Calculate Profit and Loss −
Profit: SP – CP
Profit Percentage: Profit/CP * 100
Loss: SP – CP
Loss Percentage: Loss/CP * 100
Example 1
In the example below, we have created a calculator that will calculate the profit and loss percentage as per the cost price and the selling price.
On clicking the Calculate button, it will call the function that will get the CP & SP inputs and then calculate the profit and loss.
#Filename: index.html
<!DOCTYPE html> <html lang="en"> <head> <title>Profit and Loss Calculator</title> </head> <body> <div class="plcalculate"> <h1 style="color: green;"> Welcome To Tutorials Point </h1> <h3>Profit and Loss Calculator</h3> <p>Enter the Cost Price(CP) : <input class="cp" type="number" /> </p> <p>Enter the Selling Price(SP) : <input class="sp" type="number" /> </p> <button onclick="Calculate()">Calculate Profit/Loss</button> <p> <h2 class="loss"></h2> <h2 class="lossPercentage"></h2> <h2 class="nothing"></h2> </p> </div> <script> function Calculate(){ const CP= document.querySelector(".cp").value; const SP= document.querySelector(".sp").value; const profitLoss=document.querySelector(".loss"); const percentage=document.querySelector(".lossPercentage"); const nothing=document.querySelector(".nothing"); profitLoss.innerHTML=""; percentage.innerHTML=""; nothing.innerHTML=""; const diff=SP - CP; if(diff>0){ const profit_percent= ((diff/CP)*100).toFixed(2); profitLoss.innerHTML="It is a Profit of: INR "+ diff; percentage.innerHTML="Total Profit Percentage : "+ profit_percent; } else if(diff<0){ const loss_percent= ((Math.abs(diff)/CP)*100).toFixed(2); profitLoss.innerHTML="It is a Loss of: INR "+ Math.abs(diff); percentage.innerHTML="Total Loss Percentage : "+ loss_percent; } else if(diff==0){ nothing.innerHTML="No Profit No Loss"; } } </script> </body> </html>
Output
On successful execution of the above program, it will produce a Profit and Loss calculator. You can enter Cost Price and Selling Price. After entering the Cost Price and Selling Price, you can calculate the profit or loss by clicking the button “Calculate Profit/Loss”.
- Related Articles
- Creating a Simple Calculator using HTML, CSS, and JavaScript
- How to design a Loan EMI Calculator using HTML, CSS and JavaScript?
- Real Time Calculator using HTML, CSS, and JavaScript
- How to Create a Color Picker using HTML, CSS, and JavaScript?
- How to Create a Parallax Effect using HTML, CSS, and JavaScript?
- How to create a revealing sidebar using HTML, CSS, and JavaScript?
- How to create Expanding Cards using HTML, CSS, and JavaScript
- Profit and loss Problems using C
- How to Create an Image Slider using HTML, CSS, and JavaScript?
- How to Create an Analog Clock using HTML, CSS, and JavaScript?
- What is difference between profit and loss account and profit and loss appropriate account?
- How to create a draggable HTML element with JavaScript and CSS?
- How to create a modal popup using JavaScript and CSS?
- Compare balance sheet and profit and loss account
- How to build a random quote generator using HTML, CSS, and JavaScript?
