yog9 / employee-directory

Employee Directory used a random user API to generate random users and generate their details. Clicking a user would pop up a modal for additional information.

Employee Directory

Demo Employee Directory Here

Summary

Employee Directory used a random user API to generate random users and generate their details. Clicking a user would pop up a modal for additional information.

Motivation

The purpose of this project was to understand more about communicating with a third-party API using JQuery.

Getting Started

• Click the demo link or clone/download the repository on your local machine and open the index.html file with a browser.
• Click the employee/employee information in the grid to open a modal window with more detailed information.The modal window can be closed by clicking outside the modal.
• Enter the name of employee in the search box to filter the directory by employee name.

Thoughts

I am still not sure how can I use javascript to call an event listener on dynamically added elements.

Built With

• HTML5
• CSS3
• JQUERY
• AJAX
• API

Features

1. Responsive Design

2. Compatible on Chrome 68.0.3440.106 and Firefox 62.0(64-bit)

3. Hover state employee information

4. Search functionality to filter the directory by name

5. Flexbox layout

Coming Soon

• Add a way to move back and forth between employee detail windows when the modal window is open.
• Closing the modal by clicking the dynamically added element rather that clicking outside the box.