/employee-directory

Employee directory from an API

Primary LanguageJavaScript

Employee Directory

View the demo here.

This app is built for a fictional company called Awesome Startup, a distributed company with remote employees working all over the world. They need a way for employees to share contact information with each other. The employee directory uses the Random User Generator API (randomuser.me) to grab information for 12 random "employees". This app uses the browser's Fetch API to request a JSON object from the API and parse the data so that 12 employees are listed with their thumbnail image, full name, email, and location. This project was created for the purpose of the Treehouse Full Stack JavaScript Techdegree.

Project Requirements

This project is reviewed and graded based on a set of requirements.

Meets Expectations

  • 12 random users are pulled from the API
  • New random employee information displays each time the page refreshes
  • The directory displays 12 users from the Random User API, and includes the following for each user:
  • Employee Image
  • First and Last Name
  • Email
  • City or location
  • Modal window displays at least the following details:
  • Employee image
  • Name
  • Email
  • City or location
  • Cell Number
  • Detailed Address, including street name and number, state or country, and post code
  • There is a way to close the modal window.
  • The major elements of the directory and modal window are in place and roughly match the mockups.

Exceeds Expectations

  • Employees can be filtered by name with dynamically added search feature.
  • Functionality has been added to switch back and forth between employees when the detail modal window is open.
  • No errors in the console when the end or beginning of the list is reached.
  • At least one of the following has been added or changed:
  • Color
  • Background color
  • Font
  • Box or text shadows

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development.

Downloading

Click on the 'Clone or download' button and select 'Download Zip.'

Installing

Step 1: Unzip the zip file.

Step 2: Open the folder in a text editor.

Using a text editor, you can view/edit the code or preview the app in a browser.