https://github.com/danpoynor/public-api-request-example-project
Full Stack JavaScript Techdegree: Project 05
https://github.com/danpoynor/public-api-request-example-project
css3 flexbox html5 randomuser-api vanilla-javascript
Last synced: 3 months ago
JSON representation
Full Stack JavaScript Techdegree: Project 05
- Host: GitHub
- URL: https://github.com/danpoynor/public-api-request-example-project
- Owner: danpoynor
- Created: 2021-12-26T23:02:09.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-01-26T19:03:09.000Z (over 3 years ago)
- Last Synced: 2025-01-17T02:11:50.489Z (5 months ago)
- Topics: css3, flexbox, html5, randomuser-api, vanilla-javascript
- Language: JavaScript
- Homepage: https://danpoynor.github.io/public-api-request-example-project/
- Size: 8.79 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Public API Requests Project
This web based app is for a fictional company called Awesome Startup, a distributed company with remote employees working all over the world. They need a smart way for employees to share contact information with each other. The app uses the Random User Generator API ([https://randomuser.me/](https://randomuser.me/)) to grab information for 12 random “employees”, and use that data to build a prototype for an Awesome Startup employee directory. The returned JSON data is parsed 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.
Live Preview: https://danpoynor.github.io/public-api-request-example-project/
---
## Code Validation
[W3C HTML Validation ](https://validator.w3.org/nu/?doc=https%3A%2F%2Fdanpoynor.github.io%2Fpublic-api-request-example-project%2F)
[W3C CSS Validation](http://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Fdanpoynor.github.io%2Fpublic-api-request-example-project%2Fcss%2Fstyles.css&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=en)
---
## Features Include
- Random employee data pulled from the Random User Generator API
- 12 employees displayed in a flex format
- Real-time search to filter employees name
- 'No results' message shown when no employees match the search
- Modal dialog with more detailed information
- Modal dialog carousel with circular Previous/Next navigation
- Responsive mobile-first design
---
## Style Changes Made
- Colors updated including background, font colors, and button colors.
- Card box shadows added to default view and updated rollover state
- CSS custom properties updated
---
## Code Organization
expand/collapse
```javascript
Employee{} /* class template used for creating employee objects */
/* Modal dialog feature */
getEmployee(email) // helper function gets a single employees data from `window.employees[]`
modalUpdate(employee) // updates the modal dialog with the employee's data */
modalCarousel(direction) // calls `modalUpdate(employee)` based on the `direction`
modalListeners() // adds listeners to the modal, calls `modalCarousel(direction)`
modalCreate(employee) // creates a modal dialog then calls `modalListeners()`
/* Card feature */
cardListener() // adds listeners to the cards, calls `modalCreate(getEmployee(email))`
cardCreate(employee) // creates a card for an employee
/* Search feature */
searchNoResultsMessage() // shows a message if no employees are shown
searchFilter(searchInput) // filters employees based on the search input, calls `searchNoResultsMessage()`
searchListener() // adds 'keyup' and 'input' listeners to search input, calls `searchFilter(searchInput)`
searchCreate() // creates a search input then calls `searchListener()`
/* Employees feature */
employeesGet() // gets employees from API, calls `Employee{}` for each, populates `window.employees[]`
employeesShow() // calls `cardCreate(employee)` for each employee then `cardListener()` when done
/* Initialization */
employeesGet().then(() => {
employeesShow();
searchCreate();
});
```
---
## Technologies Used
- HTML
- CSS
- JavaScript
- Random User Generator API
---
## Potential Improvements
- When only one search result and modal is presented, don't include the carousel navigation