What tools do you need for this project? Notepad++, HTML 5, Javascript, cascading style sheets, Visual Basic, Python etc.
Do you want the application to mobile friendly?
Where will you find information?
What knowledge do you have about the application you are trying to create?
Do you need an expert in the field that your application covers?
We need a module that allows you to set up employee information: name hourly rate, marital status, etc.
Initialize all variables for the application for each employee for 4 weeks
Decide on weekly, semi-monthly or monthly pay period.
A second module that allow you to enter hours worked.
A section in module 2 that calculates overtime, gross pay, Federal Income tax, FICA, Medicare, State income tax, state disability insurance, total deduction and net pay.
You could look at a pay stub to see these deductions and calculate the percentages.
A function in module 2, a payroll register, showing all employees, hours worked, gross pay, deduction for federal Income tax, FICA, Medicare, state income tax, state disability insurance, total deductions and net pay.
A function in module 2 to calculate the employers' share of Federal Insurance Contributions Act (social security), Medicare FUTA and SUTA.
A third module to keep track of employee earnings' records for 4 weeks.
Day 1: Module 1 Employee Information
Initialize Variables
Employee information might include, name, contact information, social security number hourly rate, exemptions claimed, marital status, job title, etc.
First we need to see how to organize this information. In the HTML section we could create a table, to hold this information.
Let's use Employee Name, Job Title, Marital Status, Exemptions and Pay Rate.
First we need to create the table. We set cellspacing, cellpadding and border to 2 pixels.
Next we create the table headings. The next step is to create the table data rows and table data cells.
Instead of entering data into the table, I want to load the data from a file stored in HTML5 local storage.
Javascript has a file format called JSON, Javascript Object Notation.
JSON is an open standard file format, and data interchange format, that uses human-readable text to store and transmit data objects consisting of attribute–value pairs and array data types. It is a very common data format, with a diverse range of applications, such as serving as a replacement for XML in AJAX systems.
We will use this format to store our employee information for our payroll project and then using the retrieve() function and load it into our table using the getElementById innerHTML method.
Next we will decide on variables for the project. There are lots of them. We have 4 employees, each has a deduction each week for 4 weeks for hours worked, grosss pay, Federal Income Tax, FICA, Medicare, state income tax, state disability insurance, state training tax, total deductions and net pay.
You need to have a system when assigning this many variables: Here is what I did. Jerry, is employee 0, Janet is employee 1, Julie is number 2 and Shelley is number 3.
For example. Janet's gross pay is grossPay1, Julie's net pay is netPay2. Each week needs to also be indentified. I used nothing for the first week, w2 for week 2, w3 for week 3 and w4 for week 4.
For example, Janet's federal income tax for week 3 is fedIncTax1w3.
After the variables names have been determined, I write these variable to the local storage of HTML5 and set them all equal to zero.
Remember when using local storage and session storage, each browser acts separately. If you store the variables using Chrome using the first module, use the same browser for the other modules.
When you click on the Save button using any browser, the array with employee information is stored and the
the variables names for the payroll are written and a zero assigned for their value.
Copy the code in the textarea box above to get started
Paste this code into Notepad++ and save it as an html document. This is the first of three modules. You may want to call it setup.html
Now let's look at the JSON file.
Copy the code in the textarea box above.
Paste this code into your setup.html project between the script tags.
Now let's look at the JSON file.
This JSON file format is a multi-dimensional array.
It works with lots of computer languages.
I have used it in Python projects for artificial intelligence applications.
The name of the array is employees.
There is a separate line for each employee.
That line is enclosed in square brackets followed by a comma at the end. (except for the last employee.)
Name, marital status, job title are enclosed in either single or double quotation marks.
Just make sure that if you start using a single quote , that you end with one. If you start with double quotation marks, then end with double quotes.
Exemptions and pay rates are numbers are not enclosed in quotation marks.
Next, the array is saved into local storage using setItem.
The JSON.stringify () method converts JavaScript objects into strings. The javascript object is the array with our employees. When sending data to a web server the data has to be a string.
JSON.parse() method takes JSON string and transforms it into a JavaScript object.
The alert tag let's us know that the file is saved.
The retrieve() function is next called.
The file is next converted back to an javaScript object so we can work with it.
name0, job0, marital0, exem0, and pay0 all refer to the first employee: Jerry
Each employee has in index in the array, starting with 0. Jerry is 0, Janet is 1, Julie is 2 and Shelley is 3
Each employee has another number that refers to the specific information relating to them, like store manager, married, 25.55, etc.
If you want to see Jerry's name you refer to obj[0][0]
If you want to see Janets' job title, you would use obj[1][1]
The code takes the information and inserts it into the table in the correct place based on the paragraph id.
Next all variables are initialized and saved in local storage.
Finished page that creates and saves the employees array
Day 2: Calculating hours worked HTML5 form
In this second module, we need to decide the pay period: weekly, semi-monthly or monthly. I chose weekly for this lesson. The pay period is important for determining the hours and payroll deductions.
First we have to retrieve our file containing employees' names, job titles, marital status, exemptions and pay rates.
Next we want to load that data into a table.
Now we have to determine how the user enters the hours worked.
I chose the HTML5 input number field. You can specify a minimum and maximum number of hours to be input.
In our company, employees usually work on average 40 hours per week.
Some work 35 hours and some may put in 5 hours of overtime, hours greater than 40 for a maximum of 45 hours.
We can also set a value of 35 and the user can then scroll up or down to increase or decrease that number.
We first retrieve the file with employee names. This is the same file as on the previous page.
The body onload tag calls the retrieve file function.
Next we want to give the user the opportunity to enter the hours.
Listed below is the html5 code for this.
Copy the code in the textarea box above and save it with an html extension. You might want to call this second module register.html
Adding the javascript function to retrieve the file from local storage.
Here is the code.
Open up your register.html page. Copy the code in the textarea box, paste it between the script tags above and save it.
Day 3: Payroll Register
The payroll register is an accounting form that show us our company's payroll costs. Below is a sample of what one might look like.
It is just a table with rows and columns and headings. We will fill it with our employees information soon.
We have already added the html code for the payroll register and the employers' payroll taxes.
The Calculate() function.
First we check to see that the user clicked on one of the week radio buttons.
If they did not pick a week, we do not let them enter hours worked.
next we initialize the variables for each employee.
grossPay, overtimeHours,overtimePayRate and overtime amount.
Next we get the hours worked from the user.
Users will use the up and down arrow keys to enter number of hours over 35.
Now we put those hours into the payroll register table.
Now we calculate overtime for each employee if there is any.
If there is no overtime, we get gross pay by multiplying hourly rate time hours worked.
Jerry is married and files jointly and his wife does not work outside of the household.
Janet is married and files separately
Julie is single
Shelley is married and files separately
Let's look at Jerry federal Income first. Wage and Bracket table, first column standard withholding
He is paid $25.55 per hour. If he works 35 hours he would be paid $894.25. His tax is $43.00
If he works 45 hours he would make 40 hours times $25.55 or $1,022.00 + 25.55 times 1.5 which is $38.33 per hour times 5 hours or $191.63.
Now add $1,022.00 + 191.63 to get $1,213.63 gross pay for the week.
Now if we look up $1,213.63 on the table we see the tax is $81.00
else if (grossPay0 >=1210 && grossPay0<1220 )
{
fedIncTax0 = 81;
document.getElementById("fedIncTax0").innerHTML = fedIncTax0.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
}
else if (grossPay0 >=1210 && grossPay0<1220 )
{
fedIncTax0 = 38.00 + (grossPay0-857) * .12;
document.getElementById("fedIncTax0").innerHTML = fedIncTax0.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
}
Day 4: javaScript code for federal income tax wage and bracket
Copy the code in the textarea box above.
Paste this code into your project just below the javaScript code for calculating hours worked.
Day 6: Determining FICA, Medicare, State Disability Insurance and State Training Tax
FICA stands for Federal Insurance Contributions Act, Social Security. It is a 6% deduction from employee paychecks. The employer must also match this amount of tax.
A wage base limit applies to employees who pay Social Security taxes. This means that gross income above a certain threshold is exempt from this tax. The wage limit changes almost every year based on inflation. For 2019, it was $132,900. For 2020, it’s $137,700. Wages paid exceeding $137,700 are not subject to the tax. As you can see from our payroll numbers, no employee will exceed this limit, so all of their earnings will be subject to the tax.
Copy the code in the textarea box above.
Paste this code into your project just below the javaScript code for calculating gross pay.
Day 7: Determining State Income Tax
California provides two methods for determining the amount of wages and salaries to be withheld for state personal income tax:
• METHOD A - WAGE BRACKET TABLE METHOD (Limited to wages/salaries less than $1 million)
• METHOD B - EXACT CALCULATION METHOD
METHOD A provides a quick and easy way to select the appropriate withholding amount, based on the payroll period,
filing status, and number of withholding allowances (regular and additional) if claimed. The STANDARD DEDUCTION
and EXEMPTION ALLOWANCE CREDIT are already included in the wage bracket tables. Even though this method
involves fewer computations than Method B, it cannot be used with your computer in determining amounts to be withheld.
METHOD B may be used to calculate withholding amounts either manually or by computer. This method will give an exact
amount of tax to withhold. To use this method, you must enter the payroll period, filing status, number of withholding
allowances, standard deduction, and exemption allowance credit amounts. These amounts are included in TABLES 1
through 5 of the EXACT CALCULATION section.
California Tax table 5
California Tax Tables 3 and 4
We are going to use the Exact Calculation Method for our project.
Any time you write code, you need to make sure that you are getting the same results as if you calculated it manually. Let's do this for Jerry's pay check.
Jerry worked 35 hours
His pay rate is 25.55 per hour
His gross pay, therefore, would be $894.25 (25.55 times 35)
Next we look at table 3: standard deduction table.
The standard deduction for weekly pay periods dual income married people is $87.00
Next we subtract $87.00 from $894.25 and get $807.25
We subtract the standard deduction so we can still use grossPay as our determining variable.
We will add it back when we are finished calculating state income tax.
There are four lines subtracting the standard deduction from gross pay for each employee.
Next step is to look up $807.25 in table 5: Tax Rate Table for Method B - Exact Calculation Method
According to our payroll information, Jerry is married claims 4 exemptions and his wife works fulltime.
We look at weekly payroll, single persons, dual income married or married with multiple employers.
Jerry's adjusted gross pay, after deducting the standard deduction falls in the over $634 but not over $880 category.
Now we subtract $634 from $807.25 : result is $173.25
Now we multiply this amount by .066: result is $11.43
Next, we add $11.43 to $17.20: result is $28.63
Finally we look up Jerry's exemption from table 4 for weekly pay period
That amount is $10.32 for 4 exemptions.
The next step is to subtract 10.32 from 28.63. result is 18.31. That is Jerry's state income tax deduction for the week.
Next we add the standard deduction of $87.00 back into the gross pay
Manually try different hours for different employees and then compare your result with the code below.
Now its time to write the javascript code to accomplish this with the same results. We could code our project with the entire range of salaries or look at our particular situation.
For example Janet can make as little as 803.25 ( 35 hours times 22.95) and as much as 1090.13 (22.95 times 40 = 918.00) plus (22.95 times 1.5 times 5 hours 172.13)
Looking at the code, that is how I wrote it using lowest amount of gross pay to highest for each employee. Of course, crcumstances could change and the code would have to be modified. A raise in salary for an employee could affect the lines of code needed to process our payroll.
if (grossPay0>634 && grossPay0<880)
{
caTax0 =.066 * (grossPay0 -634) + 17.20
// get total deductions weekly 4 exemptions = 10.32
caTax0= caTax0-10.32
//alert("Jerry's ca tax is " + caTax0);
}
Copy the code in the textarea box above.
Paste this code into your project just below the javaScript code for calculating FICA, and Medicare.
Day 8: Calculating State Disability, State Training tax, total deductions and net pay
Now its time to calculate state disability insurance .009, state training tax,.001, total all deductions and calculate net pay. Here is the code.
Copy the code in the textarea box above.
Paste this code into your project just below the javaScript code for calculating State Income tax.
Day 9: Totaling Payroll register
Now its time to total up the payroll register.
Copy the code in the textarea box above.
Paste this code into your project just below the javaScript code for totaling total deductions and net pay.
Save your register.html project and launch it using your favorite browser. Enter different hours for each employee. Remember F12 to activate your javaScript debugger. The concole view shows you any errors and the lines where they occured.
Day 10: Employer's share of the payroll taxes
The employer must match FICA and Medicare deductions taken out of employees' paychecks. In addition they must pay federal unemployment tax (FUTA)
The Federal Unemployment Tax Act (or FUTA, I.R.C. ch. 23) is a United States federal law that imposes a federal employer tax used to help fund state workforce agencies. Employers report this tax by filing an annual Form 940 with the Internal Revenue Service. In some cases, the employer is required to pay the tax in installments during the tax year.
Wikipedia definition: FUTA covers a federal share of the costs of administering the unemployment insurance (UI) and job service programs in every state. In addition, FUTA pays one-half of the cost of extended unemployment benefits (during periods of high unemployment) and provides for a fund from which states may borrow, if necessary, to pay benefits.
Currently that rate is .6% or .006¹. It is paid on the first $7,000 of each employees' gross pay.
To check for the $7,000 for each employee, you would need to get the totals from the employees' earning records. I created a calculator to sum up gross pay for our employees.
FUTA Calculator
Copy and paste this code segment just after where printed out the payroll register totals.
Information needed for employee earning records
Copy and paste this code segment just after employer payroll taxes section.
function calculate()
{
if(validateRadio(Payroll)==false)
{
alert("Click on the week for the payroll");
return;
}
There are four variables, one for each week, for each employee. These variables are declared and then stored in local storage. The earnings record page will read and intrepret these variables.
Run the program. Enter hours for each employee for each week. Check to see if was stored, by pressing F12 and checking the presence of the variables.
Remember if you switch browsers, the data will not be there. It is stored by the web page and the browser used.
Completed register page
Day 11: Employee Earning Records: module 3
Payroll accounting involves keeping track of each employees' hours worked, gross pay, federal income tax withheld, FICA and Medicare deductions, State income tax withheld, SDI, State Training, total deductions and net pay.
At the end of each year, every employer engaged in a trade or business who pays remuneration, including noncash payments of $600 or more for the year (all amounts if any income, social security, or Medicare tax was withheld) for services performed by an employee must file a Form W-2 for each employee (even if the employee is related to the employer) from whom:
Income, Social Security, or Medicare tax was withheld.
Income tax would have been withheld if the employee had claimed no more than one withholding allowance or had not claimed exemption from withholding on Form W-4, Employee's Withholding Allowance Certificate.
Copy and paste this code into Notepad++ and save the HTML file as earnings.html.
Define the array with employee information: name, marital status, exemptions, pay rate.
Load the array into the first table for each employee.
Retrieve from local storage, hours worked for all.
Get gross pay, federal income tax, FICA, Medicare, etc for Jerry
Get same information for the other employees and put them into the second table for each employee.
Run your earnings.html page and compare it to Employee Earnings Page
Day 12: Modifications to payroll app.
Seldom do things remain static. Changes happen. Think about what you would need to do in order to modify the program if the following events occured.
Shelley got a $3.00 per hour raise.
What modules are affected?
Write out the code both html and javascript code to accomodate this change.
Make the changes to your modules and test.
What modules are affected
The company hired a part time sales person at $15.00 per hour 20 hours per week. Hal Beecher, single one exemption.
Julie got married and her new last name is now Winslow.
Her husband works full time.
They file a joint return.
What modules are affected?
Write out the code both html and javascript to handle this event.
Actually change the code to make these changes.
