The 5th project on the Full Stack JavaScript Techdegree. This application makes AJAX requests to a public API and handles asynchronous data. The application grabs information about 12 fictional employees as a JSON object from the API and builds an employee directory with it. The application displays the employees in a grid as well as in a detailed modal window with toggle buttons and is also equipped with a search functionality.
Main technologies: JavaScript
Auxiliary technologies: HTML, CSS
Complexity level: Intermediate
Estimated Time to Complete: 20 hours
Concepts: AJAX, Fetch API, Public APIs, JSON, Regex, DOM manipulation, Event listeners, CSS animations, HTML elements
- Search functionality
- Modal toggle (Prev and Next buttons)
- CSS changes
- body: backgroud color
- h1: font size and color
- Class '.card': background color and transparency, border and transition
- 'Close button' of the modal window: background color and border
- Container for the modal buttons: background color, border and border radius
- Buttons of the modal window: background color and border
- Hover effect for user card: border color and thickness
- Hover effect for buttons: background color and text color
- Transition effect for the modal window close button
- Style for disabled buttons
- CSS hover effect for the user card
- CSS animation effects when opening the modal windows and when toggling back and forth