Build a simple payroll generator HTML page while using JavaScript to process inputted data and perform various calculations. Create a single HTML page and a single JavaScript file.

Create an employee payroll system that takes employee information and displays it in HTML as well as generate the overall totals. Consider that all employees will have similarities in their information. For example, each employee will have the following categories of information:

$-$Employee Number

$-$Employee Name

$-$Employee Type $($hourly$,$ executive, manager, non$-$manager$)$

$-$Gross Pay

Note that hourly and non$-$manager employees have the same basic employee information as other employees listed above and they also have the additional information of Hours Worked and Rate of Pay. In addition, for hourly and non$-$manager employees, the Gross Pay information is calculated by multiplying Hours Worked by Rate of Pay.

Use the string below

$100001|$Hank Hand$|$Salary$|400|4000|10001|$Aaron Ant$|$Hourly$|35|750|10002|$Barbara Bell$|$Salary$|400|3000|10003|$Conner Cutter$|$Hourly$|40|1000|10004|$Donald Dock$|$Hourly$|32|1500|10005|$Emma Evil$|$Salary$|40|2500|10006|$Frank Funk$|$Salary$|40|2700|10007|$Greg Grub$|$Hourly$|30|750|10008|$Heather Health$|$Salary$|400|3500|10009|$Ian Ickl$|$Hourly$|26|450|$

to use as input for your employee payroll system. This string contains information for $10$ employees using a pipe character $(|)$ to delimit information about a specific employee and a comma to separate employees. Hourly and non$-$manager employees will have values for Hours Worked and Rate of Pay, but executive and managers will have zero for both of these values.

For each employee, display the following information in a table:

$-$Employee Number

$-$Employee Name

$-$Employee Type

$-$Hours Worked $($only if the employee type is hourly or non$-$manager$)$

$-$Gross Pay

In a separate table, while using JavaScript, include a table that displays the total numbers:

Total employees processed

Total hourly employees processed

Total executive employees processed

Total manager employees processed

Total non$-$manager employees processed

Total Gross Pay processed

Complete the following:

$-$Create an HTML page with a single input text box at the top with a label of $$Payroll Input.$$ Put the payroll input string your instructor provided you with in the course announcement into this Payroll Input text box when you run the page.

$-$On the HTML page, add a button with display text of Calculate Payroll.

$-$When the Calculate Payroll button is clicked, execute JavaScript code that will read the string from Payroll Input and parse out the employees and information for each employee.

$-$Also, while parsing out the information, add up the total numbers $($e$.$g$.,$ total employees, total hourly employees, etc.$),$ including total gross pay.

$-$After parsing out all of the information, display a table with employee information for five employees across the page in one row and five employees across the page for a second row.

$-$When the information is being displayed, it should be displayed read only.