Description
Open the project files in your favorite text editor and preview them in the browser. Also, it’s a smart idea to test your project in multiple browsers!
Github
• Have a GitHub account and create a new repo for this project.
• Create a README.md file for your repo that explains what the project is and anything your fellow developers might need to know to use the project.
Download the project source files
• index.html – basic markup that you’ll dynamically add DOM elements to.
• css/styles.css – all the basic styles you’ll need for this project. But you are encouraged to experiment with things like color, background color, font, shadows, transitions and animations to make this project your own
• css/normalize.css – for cross-browser consistency.
• mockups/employee_directory.png and mockups/employee_overlay.png – examples of what the finished project should look like.
Review the Random User Generator documentation: https://randomuser.me/documentation. Grab the example they provide and console.log the data so you can see what information you’ll receive and start to think about how you’ll access the correct information and display it on the page.
Create your js/scripts.js file and wire it up to the HTML.
• Other frameworks, libraries, or plugins are not permitted.
HTML
• You’ll be provided with a basic index.html file to use in your project. But this file is missing the main components of the app, which you will need to create and add to the DOM dynamically.
Structure, style, and CSS
• Your finished project should match the general position and layout of the mockups. If you followed the arrangement and attributes of the template markup in the HTML comments, then the provided styles should accomplish this for you.
• You are encouraged to experiment with things like color, background color, font, shadows, transitions and animations to make this project your own.
Get and display 12 random users
• With information provided from The Random User Generator API, send a single request to the
API, and use the response data to display 12 users, along with some basic information for each: o Image
o First and Last Name o Email
o City or location
• Refer to the mockups and the comments in the index.html file for an example of what info should be displayed on the page and how it should be styled.
Create a modal window
• When any part of an employee item in the directory is clicked, a modal window should pop up with the following details displayed: o Image o Name
o Email
o City or location o Cell Number o Detailed address: Street name, street number, state or country, and post code. o Birthday
• Make sure there’s a way to close the modal window.
• Refer to the mockups and the comments in the index.html file for an example of what info should be displayed on the page and how it should be styled.
Add code comments
EXTRA CREDIT
Search
• Add a way to filter the directory by name. To do this, you’ll need to adjust your API request to retrieve a user nationality that will only return data in the English alphabet.
• Example markup for this feature is included in the HTML comments.
Note: Your search feature should filters results that are already on the page. So don’t request new info from the API for your search.
Modal toggle
• Add a way to toggle back and forth between employees when the modal window is open.
• There should be no errors once the end or beginning of the list is reached.
• Example markup for this feature is included in the HTML comments.
Structure, style, and CSS
• Add or change at least one of the following:
o Color o Background color o Font o Box or text shadows
• Document your style changes in your readme file and the project submission notes.
• Do not alter the layout or position of the important elements on the page.
