davidvetter / weekend_jquery_salary_calculator

Tier 2 - Week 1 - Weekend Challenge #1

Employee Salary Calculator

Description

Duration: 20 hours

This project will take in an employee first and last name, employee ID number, title and annual salary through input fields on the DOM. All fields are REQUIRED or you will get an error message and the employee will not be added. ID and salary must be numbers. The values get added to a table as a row and a global array as an object. You may add as many employees as needed. When the page opens, the input fields and employee table are hidden by default (see screenshots below). Simply click the "Add Employee" heading or "Employee" heading to display the inputs or table (respectively). The table will display itself by default when an employee is added. You may toggle hide or show at anytime by clicking on the appropriate heading again. The annual salaries of all employees in the table are used to calculate the total monthly salary due by the business. Each employee in the table has a delete button that removes only that employee from the DOM and global array. The total monthly salary to pay is also updated and re-displayed. Each column header is also a sorting button that re-displays the current employees by the header (delete buttons still work on a row level). The clear button appears after an add has been made and will clear ALL employees from the DOM and global array. After monthly total is over 20K, the background becomes red. This resets if the monthly total falls back below 20K.

Screen Shots

Prerequisites

• Common Sense
• Modern Browser

Installation

Installation should pretty straight forward! Everything is web-based so simply open the website in a modern web browser and you should be ready to start adding your employees and calculating your salaries. (Currently not hosted anywhere so download repo to folder and open index.html in a browser)

1. Find url of Salary Calculator (https://github.com/davidVetter/weekend_jQuery_salary_calculator)
2. Navigate to webpage
3. START ADDING EMPLOYEES!
4. Delete employees as needed.

Usage

1. Open webpage.
2. Use input fields to enter employee information.
3. Once all fields are filled, click "Add" button to display employee in table and calculated monthly salary.
4. Use "Delete" button on each employee row to remove that employee from table and the backend. (Monthly salary updates on removals)
5. Use "Clear" button to remove all employees at once. (Hidden by default until a record is added to the employee table)
6. Each column header is a sort button. Click the head to sort by that column in descending order. You may click a different heading to re-sort on that heading.
7. The "Add Employee" main heading is button to show/hide the input fields. (Loads as hide by default).
8. The "Employees" main heading is a button to show/hide the employee table. (This is hidden by default on page load, opens by default on first employee add).

Built With

• HTML
• Javascript
• jQuery
• CSS

License

• No license
• Use as needed

Acknowledgement

• Thanks to Emerging Digital Academy who equipped and helped me to make this application a reality.
• Thanks to Coolors.co for the color palette used.
• Thanks to W3 SChools for the refernce material on HTML, Javascript and CSS.
• Thanks to Mozilla for the in-depth reference material when a deeper understanding is need.

Support

If you have suggestions or issues, please email me at GMAIL