For this project, I'll build an app for a fictional company that will allow for employees to share contact information with each other.
How? I’ll be using the Random User Generator API (https://randomuser.me/) to grab information for 12 random “employees,” and use that data to build a prototype for an Awesome Startup employee directory.
I’ll request a JSON object from the API and parse the data so that 12 employees are listed in a grid with their thumbnail image, full name, email, and location. Clicking the employee’s image or name will open a modal window with more detailed information, such as the employee’s birthday and address.
Extra Functionalities:
- Search bar that will allow you to search for the "employee" by name.
- Prev & Next buttons to navigate back and forth between employees when the modal window is open.
CSS Styling
- The employee cards will display a blue box shadow when the user hovers the contact card.
- The search bar and search button will change to a blue border hue when the user hovers over it.
- In the modal window, the X, Prev, & Next buttons will change their background color from blue to white.