UI for Employee List is a single-page application, built using HTML, CSS and Javascript functions. Everything on the page loads dynamically to a single page using DOM library.
Home Page: Start at the home page view. When user selects one of the navigation items (Print, Verify, Lookup, Contains, Update, Add, and Delete), it first load the input fields. Once the user enters the data in the input field and selects the action button, it dynamically load either a notice (something like Employee Found) or employee data.
When a new navigation option is selected, whatever is on the page, get hidden and then display the new input fields for the new page.
Print Option: If the option selected is Print, it displays all the employee names, office numbers, and telephone numbers on the page.
Verify Option: If the option selected is Verify, it display an input box to get the employee name. There is a Verify button. When the Verify button is clicked, if the employee name is found, it displays Employee Found. If the employee is not found, it displays Employee Not Found.
Lookup Option: If the option selected is Lookup, it displays an input box to get the employee name. There is a Lookup button. When the Lookup button is clicked, it displays the employee information. If the employee is not found, it displays Employee Not Found.
Contains Option: If the option selected is Contains, it displays an input box to get a partial employee name. There is a Contains button. When the Contains button is clicked, it displays any employees' information that matches the partial name. If no employees are found, it displays Employees Not Found.
Update Option: If the option selected is Update, it displays an input box to get the employee name, office number, and phone number. There is an Update button. When the Update button is clicked, it displays the employee's new updated information. If no employee was found, it displays Employee Not Found.
Add Option: If the option selected is Add, it displays an input box to get the employee name, office number, and phone number. There is an Add button. When the Add button is clicked, it displays the new employee's information.
Delete Option: If the option selected is Delete, it displays an input box to get the employee name. There is a Delete button. When the Delete button is clicked, Employee Deleted if the employee was found and successfully deleted. If the employee was not found, it display Employee Not Found.
Skills Leveraged: HTML, CSS (Grid & Media Queries), Javascript, jQuery, DOM Library, Version Control/Git, Responsive Design, Testing, Debugging, Browser Developer Tools, Command Line Interface
Deployed Code: https://github.com/mandeepkaurdev/05-unit
Deployed Project: https://mandeepkaurdev.github.io/05-unit
