Awesome Startup

Rendering employees contact information using Random User Generator API.

Main Page

Employee Card

Installation and Setup Instructions

To make below steps work, You will need node and npm installed globally on your machine.

# Clone this repository
$ git clone https://github.com/ZaidKhan144/employee-directory.git

# Enter the Git folder
$ cd employee-directory

# Install dependencies
$ npm install

# Start the project
$ npm start

Tech used

• JavaScript
• Random User Generator API
• HTML
• CSS
• ESLint - A linter tool to standardize code
• Prettier - Code formatter
• GitHub Pages

Reflection

The main goal of this project was to get used to fetch data from an API.

I have used Random User Generator API to grab information for 12 random 'employees.' Requested a JSON object from the API using fetch and parse the data for 12 employees that are listed in a grid with their thumbnail image, full name, email, and location. Clicking the employee's image or name will open a model window with more detailed information, such as the employee's birthday and address. I have also given a search functionality to improve the accessibility for the user.

Following the mockup, I started this project by first creating HTML and CSS to structure the basic layout and then used fetch to display employee data. Later I created a slider to move through employee data and a search bar to search employee by name.

To build this project, I have used HTML, CSS, JavaScript, Random User Generator API, and fetch.

You can view the live version of the app here: https://zaidkhan144.github.io/employee-directory/