What is a salary slip?

A salary slip is also called pay slip. It contains earnings, allowances, deductions, and more. A salary slip is given by an employer to their employees every month either by sending a soft copy or a hard copy.

In this post, you will learn how to calculate the monthly salary of an employee and generate a salary slip (pay slip).

Skills required

HTML:-

Form elements, Table elements, and various input types.

CSS:-

Basic and commonly used CSS properties. The transform property is used to center <div> elements.

JavaScript:-

JavaScript validates input fields and calculates salary and displays salary details on pay(salary) slip.

Components included in salary slip

Earnings

Basic:-

Basic is an important component in salary slips it includes the salary given to an employee based on his/her skills, experience, and qualifications. The basic salary is calculated from 30% to 50% of annual income.

House rent allowances (HRA):-

It includes the amount of a house rent provided by an employer to an employee. HRA amount is 40% or 50% deductions from basic pay.

Conveyance allowance:-

Conveyance allowance includes amounts of expenses of travel of coming and going to the company and residence. It is a fixed amount given by the company.

Overtime allowance:-

Overtime allowance includes income for the extra time given by the employee for work. It is a fixed amount decided by the employer. In this salary slip generation project the overtime amount is 500 rs. for overtime of 1 day.

Medical allowance:-

Medical allowance includes the amount of medical emergency of employee given by employer during the period of contract.

Food allowance:-

Food allowance includes expenses of breakfast, lunch, and dinner given by a company to employees. It is a fixed amount decided by the company.

Special allowance:-

Special allowance pay for employees' performance at work to encourage them. It is also a fixed amount decided by the company.

Gross salary:-

Gross salary is the total amount of all the earnings.

Deductions:-

Provident fund (PF):-

A provident fund is an amount deducted from an employee's basic salary and it also includes employer contribution. The total of both contributions is 12%.

Income tax:-

The income tax amount is tax paid to the government. Income tax is calculated according to a specified income slab by the government.

Employee insurance:-

Employee insurance is a deductions amount of an insurance policy purchased by a company to give its benefits during employee critical conditions like an accident, sick health, etc...

Leave deduction:-

Leave deduction is a debit amount from an employee's salary. The amount is decided by the company.

Total deduction:-

Total deduction is the total of all deductions listed in the salary slip.

Net salary:-

Net salary is the actual income that the employee gets after the total deduction eliminates from gross salary. It is also known as hand-in salary.

Code of salary slip generator

HTML:-

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>salary slip</title>
<script src="salaryslip.js"></script>
<link rel="stylesheet" href="salaryslip.css" >
</head>
<body>
<div class="heading">
<h2>Salary Slip Generator</h2>
</div>
<div class="infoentry">
<form>
<table>
<tr>
<th>
<label for="eid">Employee_Id:</label>
</th>
<td><input type="number" name="eno" id="no"/></td>
</tr>
<tr>
<th>
<label for="enm">Employee_name:</label>
</th>
<td><input type="text" name="ename" id="empnm" /></td>
</tr>
<tr>
<th>
<label for="desi">Designation:</label>
</th>
<td><input type="text" name="desig" id="des" /></td>
</tr>
<tr>
<th>
<label for="departmnt">Department:</label>
</th>
<td><input type="text" name="depart" id="dp" /></td>
</tr>
<tr>
<th>
<label for="">Experience:</label>
</th>
<td><input type="number" name="exp" id="exps" /></td>
</tr>
<tr>
<th>
<label for="totday">Total Days:</label>
</th>
<td><input type="number" name="totalday" value="26" id="tday" readonly/></td>
</tr>
<tr>
<th>
<label for="pd">Present Days:</label>
</th>
<td><input type="number" name="pday" id="pd" /></td>
</tr>
<tr>
<th>
<label for="anualsal">Annual Salary:</label>
</th>
<td><input type="number" name="ansal" id="annualsal" /></td>
</tr>
<tr>
<th>
<label for="otday">OT days:</label>
</th>
<td>
<input type="number" name="otd" id="ot">
<small>500 rs. per day</small>
</td>
</tr>
<tr>
<th>
<label for="bank">Bank:</label>
</th>
<td><input type="text" name="banknm" id="bnm" /></td>
</tr>
<tr>
<th>
<label for="banka/c">Bank A/C:</label>
</th>
<td><input type="text" name="bacc" id="bacnt" /></td>
</tr>
<tr>
<th>
<label for="bank">PF A/C:</label>
</th>
<td><input type="text" name="pfac" id="pf" /></td>
</tr>
<tr>
<th>
<label for="paydate">Date of Paying:</label>
</th>
<td><input type="date" name="dpay" id="pdate" /></td>
</tr>
<tr>
<th>
<label for="mon">Month of Paying:</label>
</th>
<td><input type="month" name="mpay" id="mdate" /></td>
</tr>
<tr>
<td>
<input type="button" name="calc" value="Generate pay slip" id="cal" onClick="calculate()"/>
</td>
<td>
<input type="reset" name="calc" value="CLEAR" id="cal"/>
</td>
</tr>
</table>
</form>
</div>
<div class="salaryslip">
<div id="company">
<h2>company name</h2>
<pre>
name of place,direction
city,state
pin code
</pre>
</div>
<table id="slip" border="1" frame="void" rules="all">
<tr>
<th>
<h3>Pay slip for </h3>
</th>
<td>
<h3 id="paymonth"></h3>
</td>
</tr>
<tr>
<th>Employee id</th>
<td><p id="empid"></p></td>
<th>Employee Name</th>
<td><p id="name"></p></td>
</tr>
<tr>
<th>Department</th>
<td><p id="dep"></p></td>
<th>Designation</th>
<td><p id="designation"></p>
</td>
</tr>
<tr>
<th>Bank name</th>
<td><p id="bankname"></p></td>
<th>Paying date</th>
<td><p id="pdt"></p>
</td>
</tr>
<tr>
<th>Bank A/C no.</th>
<td><p id="bano"></td>
<th>PF A/C no.</th>
<td><p id="pfano"></p>
</td>
</tr>
<tr>
<th>Earnings</th>
<th>Amount (Rs.)</th>
<th>Deduction</th>
<th>Amount (Rs.)</th>
</tr>
<tr>
<th>Basic</th>
<td><p id="basicsal"></p></td>
<th>Provident fund(PF)</th>
<td><p id="pfamt"></p></td>
</tr>
<tr>
<th>House Rent Allowence</th>
<td><p id="hrent"></p></td>
<th>Income Tax</th>
<td><p id="itamt"></p></td>
</tr>
<tr>
<th>Conveyance</th>
<td><p id="convey"></p></td>
<th>Employee Insurance</th>
<td><p id="empins"></p></td>
</tr>
<tr>
<th>Over Time</th>
<td><p id="otamt"></p></td>
<th>Leave Deduction</th>
<td><p id="lvded"></td>
</tr>
<tr>
<th>Medical Allowance</th>
<td><p id="medallow"></p></td>
</tr>
<tr>
<th>Food Allowance</th>
<td><p id="foodallow"></p></td>
</tr>
<tr>
<th>Special Allowance</th>
<td><p id="specallow"></p></td>
</tr>
<tr>
<th>Gross Salary</th>
<td><h3 id="grosssal"></h3></td>
<th>Total Dedution</th>
<td><h3 id="totded"></h3></td>
</tr>
<tr>
<th><h1>Net Salary</h1></th>
<td><h2 id="netsal"></h2></td>
</tr>
</table>
</div>
</body>
</html>

CSS:-

/* CSS Document */
*{
font-family:"Times New Roman", Times, serif;
}
table
{
font-size:16px;
}
.heading
{
position:absolute;
top:10px;
background-color:#CC6600;
color:#993300;
padding-left:50px;
padding-right:50px;
box-shadow:3px 3px 15px #993300;
border-radius:10px 10px 0px 0px;
}
input
{
width:100%;
box-sizing:border-box;
}
.infoentry
{
position:absolute;
top:100px;
padding:20px;
background-color:#009966;
}
.salaryslip
{
position:absolute;
top:600px;
padding:10px;
margin-top:100px;
background-color:#CCCCCC;
}
.heading,.infoentry,.salaryslip
{
margin-left:50%;
transform:translate(-50%);
}
th
{
text-align:left;
}
label
{
color:#333333;
}
input[type=text],[type=number],[type=date],[type=month]
{
background:transparent;
color:#FFFFFF;
border:none;
border-bottom:1px solid #333333;
border-radius:15px;
}
input[type=button]
{
margin-top:20px;
height:40px;
width:100%;
border-radius:50px;
font-size:18px;
color:#0000CC;
background:linear-gradient(#333333,#CCCCCC);
}
input[type=button]:hover
{
background:linear-gradient(#CCCCCC,#333333);
border:none;
}
input[type=reset]
{
margin-top:20px;
padding:10px;
margin-left:5px;
border-radius:50px;
background:#333333;
color:#FFFFFF;
}
#company
{
text-align:center;
border-bottom:2px solid #000000;
}
#slip
{
background-color:#CCCCCC;
}

JavaScript:-

/*javascript file*/
function calculate()
{
let emp_no=document.getElementById("no").value;
let emp_name=document.getElementById("empnm").value;
let de=document.getElementById("des").value;
let dep=document.getElementById("dp").value;
let expr=document.getElementById("exps").value;
let totwday=document.getElementById("tday").value;
let prsntday=document.getElementById("pd").value;
let ann_sal=document.getElementById("annualsal").value;
let day_of_ot=document.getElementById("ot").value;
let bank=document.getElementById("bnm").value;
let pay_date=document.getElementById("pdate").value;
let bank_acc=document.getElementById("bacnt").value;
let pf_acc=document.getElementById("pf").value;
let pay_month=document.getElementById("mdate").value;
let enopat=/^\d{1,10}$/;
let enmpat=/[A-Za-z].{5,}/;
//check for input entry
if(emp_no=="" || emp_name=="" || de=="" || dep=="" || expr=="" || totwday=="" || prsntday=="" || ann_sal=="" || day_of_ot=="" || bank=="" || pay_date=="" || bank_acc=="" || pf_acc=="" || pay_month=="")
{
alert("enter value");
}
else if(!emp_name.match(enmpat))
{
alert("enter atleast 6 charachter");
}
else if(!emp_no.match(enopat))
{
alert("enter only 10 digit");
}
else if(expr>40)
{
alert("enter experiance again");
}
else if(prsntday>26)
{
alert("present day must be less than 26");
}
else if(day_of_ot>30)
{
alert("over time days must be less than 30");
}
else if(ann_sal<100000)
{
alert("annual salary atleast 100000");
}
else
{
//displaying above 8 values to payslip.
document.getElementById("empid").innerHTML=emp_no;
document.getElementById("name").innerHTML=emp_name;
document.getElementById("designation").innerHTML=de;
document.getElementById("dep").innerHTML=dep;
document.getElementById("bankname").innerHTML=bank;
document.getElementById("pdt").innerHTML=pay_date;
document.getElementById("bano").innerHTML=bank_acc;
document.getElementById("pfano").innerHTML=pf_acc;
document.getElementById("paymonth").innerHTML=pay_month;
//caluculating basic salary
let ann_basic=ann_sal*0.5;
let basic=ann_basic/12;
document.getElementById("basicsal").innerHTML=basic.toFixed(2);
//calculating house rent
let hra=basic*0.4;
document.getElementById("hrent").innerHTML=hra.toFixed(2);
//display conveyance
let ann_conv=19200;
let mon_con=ann_conv/12;
document.getElementById("convey").innerHTML=mon_con;
//calculating overtime
let ot_wages=day_of_ot*500;
document.getElementById("otamt").innerHTML=ot_wages;
//medical insaurance
let ann_medins=15000;
let mon_medins=ann_medins/12;
document.getElementById("medallow").innerHTML=mon_medins;
//Special allowance
let ann_spec=19200;
let mon_spec=ann_spec/12;
document.getElementById("specallow").innerHTML=mon_spec;
//Food allowance
let ann_food=30000;
let mon_food=ann_food/12;
document.getElementById("foodallow").innerHTML=mon_food;
//calculating gross salary
let gross_income=basic+hra+mon_con+ot_wages+mon_medins+mon_spec+mon_food;
document.getElementById("grosssal").innerHTML=gross_income.toFixed(2);
//pf calculation
let employee_contr=basic*0.12;
let employer_contr=basic*0.0367;
let pf=employee_contr-employer_contr;
document.getElementById("pfamt").innerHTML=pf.toFixed(2);
//income tax calculation
let inc_text;
if(ann_sal<= 250000)
 {
 inc_txt=0;
 document.getElementById("itamt").innerHTML=inc_txt.toFixed(2);
 }
 else if(ann_sal>=250001 && ann_sal<=500000)
 {
 inc_txt=ann_sal*0.05/12;
 document.getElementById("itamt").innerHTML=inc_txt.toFixed(2);
 }
 else if(ann_sal>=500001 && ann_sal<=750000)
 {
 inc_txt=ann_sal*0.1/12;
 document.getElementById("itamt").innerHTML=inc_txt.toFixed(2);
 }
 else if(ann_sal>=750001 && ann_sal<=1000000)
 {
 inc_txt=ann_sal*0.15/12;
 document.getElementById("itamt").innerHTML=inc_txt.toFixed(2);
 }
 else if(ann_sal>=1000001 && ann_sal<=1250000)
 {
 inc_txt=ann_sal*0.2/12;
 document.getElementById("itamt").innerHTML=inc_txt.toFixed(2);
 }
 else if(ann_sal>=1250001 && ann_sal<=1500000)
 {
 inc_txt=ann_sal*0.25/12;
 document.getElementById("itamt").innerHTML=inc_txt.toFixed(2);
 }
 else
 {
 inc_txt=ann_sal*0.3/12;
 document.getElementById("itamt").innerHTML=inc_txt.toFixed(2);
 }
 //employee insurance
 let emp_ins=basic*0.005;
 document.getElementById("empins").innerHTML=emp_ins.toFixed(2);
 //leave deduction
 let leavday=totwday-prsntday;
 let leave_ded=basic/totwday*leavday;
 document.getElementById("lvded").innerHTML=leave_ded.toFixed(2);
 //total deduction
 let tot_ded=pf+inc_txt+emp_ins+leave_ded;
 document.getElementById("totded").innerHTML=tot_ded.toFixed(2);
 //net salary
 let net_income=gross_income-tot_ded;
 document.getElementById("netsal").innerHTML=net_income.toFixed(2);
 }
}

Output image:-


Output image with filled details of salary slip generator

The final Output of salary slip generator project

summary

The components of salary slip are vary from one organisation to other organisation. The salary calculation is also different in all companies but some components like provident fund, HRA, and more are specified by government rules. I have put my calculation after the research and tried to make a salary slip generator project.

Hope you like it.

Header Ads Widget

My codding spot

Salary slip generator using HTML CSS JavaScript

What is a salary slip?

Components included in salary slip

Code of salary slip generator

The final Output of salary slip generator project

Posted by: My codding spot

Post a Comment

0 Comments

Search This Blog

Report Abuse

Popular Posts all time

Featured Post

html css footer

Ad Space

Most Popular in last month

Javascript switch

css grid layout

html css survey form

How to change content of HTML element using javascript.

CSS background animation

Tags

Popular Posts of last week

CSS Gradients – colorful background effect

Javascript if else if vs switch case

Menu Footer Widget

Contact form

Header Ads Widget

Salary slip generator using HTML CSS JavaScript

What is a salary slip?

Components included in salary slip

Code of salary slip generator

The final Output of salary slip generator project

Posted by: My codding spot

You may like these posts

Post a Comment

0 Comments

Search This Blog

Popular Posts all time

Featured Post

Ad Space

Most Popular in last month

Tags

Popular Posts of last week

Menu Footer Widget

Contact form