Using only Vanilla JavaScripts, I added the div to the DOM, and builtd functionality for the "PREV" and "NEXT" buttons added to toggle thru employees list.
I also changed some styling:
- Imported different font-family from Google Fonts and applied for the whole project.
- Changed the color of the body background, also of the h1.
- Incrized a little the border size of search input on hover.
This project is part of the curriculum for Treehouse's Full Stack JavaScript Techdegree.
Using the supplied HTML and CSS files, I built an app for a fictional company called Awesome Startup, a distributed company with remote employees working all over the world. Using only JavaScript, I dynamically inserted the employees gallery html, after fetching the data. And dynamically added the modal html to dysplay employee detailed info.
I used the Random User Generator API (https://randomuser.me/) to grab information for 12 random “employees,” and used that data to build a prototype for an Awesome Startup employee directory.
I requested a JSON object from the API and parsed the data so that 12 employees are listed in a grid with their thumbnail image, full name, email, and location. Clicking the employee’s 'card' will open a modal window with more detailed information, such as the employee’s birthday and address.
HTML, CSS and JavaScript