JavaScript Salary Calculator: Estimate Your Salary

JavaScript Salary Calculator: Estimate Your Salary, In this post we are going make simple application using HTML5, CSS and JavaScript to generate a estimate salary. This JavaScript tutorial is not complex so beginners will find it easy to learn.

Salary Calculator

Folder Structure of project Salary Calculator :

Folder name: salary

Salary folder contain main file names salary.html, sub folder name js and css. Sub folder js contain JavaScript file salary.js, while css folder contain css file file name style.css.

Main File salary.html code for Salary Calculator:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Salary Calculation</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/salary.js"></script>
</head>
<body>
<div class="c">
<h1>Salary Calculator</h1>
<p id="head">
Basic Pay
<input type="text" id="basic"/>
<br/>
<br/>

No. of Days
<input type="text" id="days"/>
<br/><br/>

<input type="submit" onclick="salary()" value="Submit" class="btn"/>
</p>
<div style="text-align:center;">
<div id="nets"></div>
Deduction<br/>
<span id="emplC"></span><br/>
<span id="emplP"></span><br/>
Addition<br/>
<span id="hr"></span><br/>
<span id="da"></span><br/>
<div id="salary"></div>
<div id="emrC"></div>
<div id="emrP"></div>
<div id="gsalary"></div>
</div>
</div>
</body>
</html>

Javascript file salary.js code for Salary Calculator:

// salary calculation script
function salary(){
   let basic=document.getElementById("basic").value;
   let days=document.getElementById("days").value;
   let od=0;
   basic=parseInt(basic);
   days=parseInt(days);
   od=parseFloat(basic/30); // for one month
   let netSalary= parseFloat(od*days);
   //emplC
   let emplC= parseFloat(netSalary * 0.0075);
   let emplP= parseFloat(netSalary * 0.0375);
   let hr= parseInt(3000);
   let da= parseFloat(netSalary * 0.10);
   let salary=0;
   salary=parseFloat(netSalary+da+hr-emplC-emplP);
   let emrC=parseFloat(netSalary*.0325);
   let emrP=parseFloat(netSalary*.12);
   let gsalary=parseFloat(salary+emrC+emrP);
   //console.log(salary);
   document.getElementById("nets").innerHTML="Basic: "+netSalary.toFixed(2);
   document.getElementById("emplC").innerHTML="ESI: "+emplC.toFixed(2);
   document.getElementById("emplP").innerHTML="PF: "+emplP.toFixed(2);
   document.getElementById("hr").innerHTML="HR: "+hr.toFixed(2);
   document.getElementById("da").innerHTML="DA: "+da.toFixed(2);
   document.getElementById("salary").innerHTML="Net Salary: "+salary.toFixed(2);
   document.getElementById("emrC").innerHTML="ESI Emplyor: "+emrC.toFixed(2);
   document.getElementById("emrP").innerHTML="PF Emplyor: "+emrP.toFixed(2);
   document.getElementById("gsalary").innerHTML="Gross Salary: "+gsalary.toFixed(2);
}

style.css Code for Salary Calculator:

body{
    background-color: #121c0e;
}
h1{
    color:#00ffe6;
  text-align:center;

}
#head{
text-align:center;
}
.note{
 text-align:center;
 font-size:18px;
}
.c{
   background-color: #121c0e;
  padding: 32px;
  margin-top: -10px;
  margin-right: -5px;
  margin-left: -5px;
  color:white;
}
#result{
    text-align:center;
    color:#afff00;
    font-size:25px;
}
.btn{
  padding: 10px;
  width: 300px;
  font-size: 1.2em;
  background:#207684;
  border: 0px;
  border-radius: 4px;
  color: #fff;
}

If you have any query or suggestion then let me know through your valuable comment, I will try to answer your comment as soons as possible.
If you have and query or suggestion then please comment, I will reply to fix your problem, if you like our content then you can subscribe to our Youtube channel. If you want to hire me then reach us at our Fiverr.