Employee Salary Appraisal Solution

Employee Salary Appraisal JavaScript

by

Employee Salary Appraisal Solution

Objective: To add scripting to the existing web page and work with JavaScript Es-6 features. The ES-6 concepts like class, object, getter and setter methods.

Problem Description: Genteel Software Solution is one of the famous software companies. They plan to increase the salary of their employees based on their experience.
You being their software consultant have been approached to develop web application to implement the functionality to manage the salary of the employees.

Following are the files that contain code snippets

index.htmlHTML for webpage (complete implementation is given for you). You only have to run this. No change needs to be done in this file.
script.jsAdd your code to this file for the functions given.


Procedure to complete the exercise

ClassPropertiesMethods
EmployeeemployeeId
employeeName
salary
experience		Include the getters and setters method for all the attributes.Include a parameterized constructor of three arguments in the following order – employeeId, employeeName, salary,experience to initialize the values for the Employee properties.


In script.js, provide the implementation for the functions as per the requirements mentioned below

Class EmployeeTemplate for Employee class is provided as part of the code skeleton. Add properties, constructor, setter and getter methods.
findIncrementPercentage( experience)This method is used to calculate and set the incremented percentage of the salary of the employees.
If the range of experience is between 1 and 5 (both inclusive) then set the incrementPercentage as 15. 
If the range of experience is between 6 and 10 (both inclusive) then set the incrementPercentage as 30. 
If the range of experience is between 11 and 15 (both inclusive) then set the incrementPercentage as 45.
calculateIncrementSalary( incrementPercentage)This method is used to calculate the incremented salary of the employee and return the same. Formula to calculate the incremented salary: 
incrementedSalary=salary+((salary*incrementPercentage)/100)
display()On Clicking submit button, this function is invoked.
1. Get the employee id, employee name, salary and experience values.
2. Create an object for the Employee class
3. Invoke the findIncrementPercentage method to calculate the incremented percentage of the salary and return it.
4. Then invoke the calculateIncrementSalary method to calculate the incremented salary of the employee and return the same in the Employee class. 
5. Display the incremented salary in div tag with id as “result” as shown in the screenshot.
(Refer to screenshot)

Sample Screenshot 1:

Employee Salary Appraisal JavaScript
Employee Appraisal Form

Sample Screenshot 2:

Employee Salary Appraisal JavaScript
Employee Appraisal Form

SOLUTION

Program: Employee Salary Appraisal Solution

script.js

var Employee = class Employee { 
    // DO NOT CHANGE THIS STATEMENT
    // Define constructors with properties
    // Setter and Getter methods for properties
    constructor(employeeId,employeeName,salary,experience)
    {
        this.employeeId = employeeId;
        this.employeeName = employeeName;
        this.salary=salary;
        this.experience=experience;
                   }
                
                
                        getExp () {
                              return this.experience;
                        }
                    
                        set Sal(s)
                        {
                            this.salary = s;
                        }
    
	 findIncrementPercentage(experience) {
	    // Fill the code to calculate and set the incremented percentage of the salary of the employees.
	    if(experience>=1 && experience<=5)
            {
                return 15;
            }	    
        else if(experience>=6 && experience<=10)
            {
                return 30;
            }	   
        else if(experience>=11 && experience<=15)
            {
                return 45;
            }	   
	}
	
	calculateIncrementSalary(incrementPercentage) {
	    //Fill the code to calculate the incremented salary of the employee and return the same. 
        var salary= this.salary;
	    var incrementedSalary=parseInt(salary)+((salary*incrementPercentage)/100);
        
        return incrementedSalary;
	}
}
function display(){
    var employeeId = document.getElementById('employeeId').value;
    var employeeName = document.getElementById('employeeName').value;
    var salary = document.getElementById('salary').value;
    var experience = document.getElementById('experience').value;
    // Get the employee id, employee name, salary and experience values.
    // Create an object for the Employee class 
    // Invoke the findIncrementPercentage method to calculate the incremented percentage of the salary. 
    // Invoke the calculateIncrementSalary method to calculate the incremented salary of the employee and return the same in the Employee class. 
    // Display the incremented salary in div tag with id as "result". 
    var data = new Employee(employeeId,employeeName,salary,experience);
    var exp= data.findIncrementPercentage(data.experience);
    var sal=data.calculateIncrementSalary(exp);
    data.Sal=sal;
    
    document.getElementById("result").innerHTML=`Incremented Salary Rs.${sal}`;
    return false;
    
}

index.html

<!DOCTYPE html>
<html>
    <head>
        <script src="script.js"></script>
        <style>
            table{
                margin-left: auto;
                margin-right: auto;
                text-align: left;
            }
            body{
                text-align: center;
            }
            #submit{
                margin-right: auto;
                margin-left: auto;
                text-align: center;
                padding: 5px;
            }
        </style>
    </head>
    <body>
        <h3>Employee Appraisal Form</h3>
        <form onsubmit="return display()">
            <table>
                <tr>
                    <td>Empolyee Id</td> 
                    <td><input type="text" name="employeeId" id="employeeId" required/></td>
                </tr>
                <tr>
                    <td>Empolyee Name</td> 
                    <td><input type="text" name="employeeName" id="employeeName" required/></td>
                </tr>
                <tr>
                    <td>Salary</td> 
                    <td><input type="number" name="salary" id="salary" required/></td>
                </tr>
                <tr>
                    <td>Years Of Experience</td> 
                    <td><input type="number" name="experience" id="experience" required/></td>
                </tr>
            </table>
            <input type="submit" name="submit" id="submit" value="Submit" onclick="display()" />
            <div id="result" >
                <script src="script.js" type="text/javascript"></script>
                </div>
        </form>
    </body>
</html>

Related:

Leave a Comment

ten − seven =