Skip to content

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.

Notifications You must be signed in to change notification settings

Yog9/Employee-Directory

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

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.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published