Techdegree Project 8

Use an API to Create an Employee Directory

View on GitHub

Summary

This project uses JavaScript to create an employee directory by communicating with a third-party API (Application Programming Interface).

Details

Communicating with APIs allows developers to work with microservices and with vast databases to build useful tools and relevant information quickly and easily. It is possible to build utilities, games, infographics, and more. Without having to create and curate the data, developers can integrate, display, and analyze social media and large data sets.

In this example, Awesome Startup is a distributed company with employees working all over the world. They need a smart way to for employees to share contact information with each other. This project uses 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.

This project will request a JSON object from the API using fetch, 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.

Solution

The user directory is structured and styled so that it matched the provided mockup, including displaying the users in a grid or table and a hover state to the rows of the user table.

I then used fetch to get and display 12 random users from The Random User Generator API. Using photos and information that the API provides, I displayed 12 users, along with some basic information. I then created a modal window that popped up when any part of the user’s row is clicked. Then also added a way to make sure there’s a way to close the modal window.

Extra Credit

To meet the 'Extra Credit' criteria, I added a way to filter the directory by name, by requesting a random user nationality that only returned data in the English alphabet.

I also added a way for users to move 'left' and 'right' between employee detail windows when the modal window is open.

Profile picture of Thomas Moore

Get in touch

I'm always open to hearing about freelance product design and development projects (or if you just want to say hi!)