allstarcodeorg/week4.day0.visdata2

week4.day0.visData2

Instructions

1. Use command line to create a new project folder called “visData2”
   • Create your typical website directory layout
2. Last time, we copy and pasted some JSON data from https://randomuser.me. This time, we’ll get data with an API request.
3. You will create a web page that displays the data you get from the API request. Also, the user should be able to sort the data being displayed by first name, last name, and gender.
4. Requirements:
   • The web page should be responsive and work properly on a mobile device:
     • The target device is Galaxy S5 (360x640) - yeah, I changed it. What!?
   • Request between 50 to 100 users from the https://randomuser.me/ API
   • Your API request should occur ONCE when the page loads!
     • I recommend storing the data in a variable or object for later use
   • You must include a form that allows the user to filter what data is displayed:
     • The user should be able to filter by first name, last name, and gender
     • Note: this should NOT require an additional API request
   • The website must be properly hosted on GitHub
   • Note: Be kind to the API server(s)! You’re cohort has 20 students all requesting information (likely from the same IP address). Don’t spam refresh your browser or loop 100 individual requests - this can get your IP address blacklisted!
5. Before you begin…
   • Wireframe your site
     • Once done, present your wireframe to your instructional team for approval.
       • If your wireframe is not approved, make any necessary revisions and try again.
   • Once approved, you may begin creating!

Extra Credit

• Instead of using a “Submit” button, allow the filtering to occur on every keystroke (the filtering occurs while the user is typing).

Helpful Resources

• Random User Documentation
• I BET PEOPLE WON’T EVEN NOTICE THIS LINK