03 JavaScript: Employee Payroll Tracker

Your Task

This week's Challenge requires you to modify starter code to create an application that enables a payroll manager to view and manage employee payroll data. This app will run in the browser and will feature dynamically updated HTML and CSS powered by JavaScript code that you write. It will have a clean and polished, responsive user interface that adapts to multiple screen sizes.

User Story

AS A payroll manager
I WANT AN employee payroll tracker
SO THAT I can see my employees' payroll data and properly budget for the company

Acceptance Criteria

GIVEN an employee payroll tracker
WHEN I click the "Add employee" button
THEN I am presented with a series of prompts asking for first name, last name, and salary
WHEN I finish adding an employee
THEN I am prompted to continue or cancel
WHEN I choose to continue
THEN I am prompted to add a new employee
WHEN I choose to cancel
THEN my employee data is displayed on the page sorted alphabetically by last name, and the console shows computed and aggregated data

Mock-Up

The following images show the web application's appearance and functionality:

Animation shows input of employees to an employee payroll tracker.

Shows employee information in the console of an employee payroll tracker.

Getting Started

You will be responsible for filling out the following functions:

collectEmployees: This function will allow a user to add multiple employees to display on the page. The user will need to enter the first name, last name, and salary of each employee, then have the option to keep adding employees until they choose to stop. A while loop will be needed here (MDN Web Docs on while loops) The salary will need to be entered as a number, otherwise it should default to $0. The isNaN function can help with this: (MDN Web Docs on isNaN) This function should return an array of objects, like the following example. Reference the MDN Web Docs on return:

    [
        {
            firstName:"John",
            lastName:"Smith",
            salary:12345
        },
        {
            firstName:"Jane",
            lastName:"Doe",
            salary:54321
        }
    ]

displayAverageSalary: This function will take in the generated array of employees and log the average salary and number of employees to the console. You should use a template literal string for this task.
getRandomEmployee: This function will take in the generated array of employees, randomly select one employee, and use a template literal to log their full name to the console. The built in Math object can help with random number generation: (MDN Web Docs on Math.random)

The provided starter code includes the displayEmployees and trackEmployeeData functions. These functions are complete and working. You do not have to modify any code for the following functions:

displayEmployees: This function will take in an array of employees and render each employee to an HTML table.
trackEmployeeData: This function will execute when the "Add Employees" button is clicked. It will take the array generated in your collectEmployees function, sort the employees by last name, and place them on a table on the page using the provided displayEmployees function. Additionally, the function will execute the displayAverageSalary function to log the average employee salary to the console, and execute the getRandomEmployee function to log a random employees information to the console.

Grading Requirements

Note: If a Challenge assignment submission is marked as “0”, it is considered incomplete and will not count towards your graduation requirements. Examples of incomplete submissions include the following:

A repository that has no code

A repository that includes a unique name but nothing else

A repository that includes only a README file but nothing else

A repository that only includes starter code

This Challenge is graded based on the following criteria:

Technical Acceptance Criteria: 40%

Satisfies all of the preceding acceptance criteria.

Deployment: 32%

Application deployed at live URL.
Application loads with no errors.
Application GitHub URL submitted.
GitHub repository that contains application code.

Application Quality: 15%

Application user experience is intuitive and easy to navigate.
Application user interface style is clean and polished.
Application resembles the mock-up functionality provided in the Challenge instructions.

Repository Quality: 13%

Repository has a unique name.
Repository follows best practices for file structure and naming conventions.
Repository follows best practices for class/id naming conventions, indentation, quality comments, etc.
Repository contains multiple descriptive commit messages.
Repository contains quality readme file with description, screenshot, and link to deployed application.

Review

You are required to submit the following for review:

The URL of the deployed application.
The URL of the GitHub repository, with a unique name and a readme describing the project.

TashinaMyers / PRtracker

PRtracker issue #1