Before you start:
1.) Download the sample layouts. We've provided two files:
• employee_directory.png - an example of what the main directory should look like • employee_overlay.png - an example of the overlay providing more detail
• You will need to create your own HTML, CSS and JS files for this project.
2.) Review the Random User Generator documentation. Grab the example they provide and console.log the data so you can see what information you’ll receive and start to think about how you’ll access the correct information and display it on the page:
https://randomuser.me/documentation
3.) Look at the project 8 study guide: https://s3.amazonaws.com/treehousetechdegree/fewd/study-guides/Employee+Directory+Study+Guide.pdf
Instructions:
1.) Use fetch to get and display 12 random users from The Random User Generator API:
https://randomuser.me/
• Using photos and information that the API provides, you’ll display 12 users, along with some basic information:
• Image
• First and Last Name
• Email
• City
2.) Create a modal window that will pop up when any part of the user’s row is clicked. The following details should display in the modal window:
• Image
• Name
• Email
• Cell Number
• Detailed Address, including street name and number, city, state, and postcode.
• Birthdate
3.) Structure and style the user directory so that it roughly matches the provide mockup.
• Display the users in a grid or table
• Add a hover state to the employee cards.
• Make sure there’s a way to close the modal window
EXTRA CREDIT
1.) Add a way to filter the directory by name. To do this, you’ll need to request a random user nationality that will only return data in the English alphabet. Note: you don't have to rely on the API to return search results. You'll need to write functionality that filters result once they already on the page.
2.) Add a way to move back and forth between employee detail windows when the modal window is open.
