https://github.com/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.
https://github.com/yog9/employee-directory

employee-information jquery random-user-generator-api

Last synced: 7 days ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/yog9/employee-directory
• Owner: Yog9
• Created: 2018-08-23T10:38:55.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2019-07-01T03:19:51.000Z (over 5 years ago)
• Last Synced: 2024-11-11T11:48:25.859Z (2 months ago)
• Topics: employee-information, jquery, random-user-generator-api
• Language: JavaScript
• Homepage: https://yog9.github.io/Employee-Directory/
• Size: 380 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Employee Directory

[Demo Employee Directory Here](https://yog9.github.io/Employee-Directory/)

## 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.