Rendering employees contact information using Random User Generator API.

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

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

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/