CS396: Winter 2022

Intro to Web Development

CS396: Winter 2022

Assignments > Lab 6. Fetch API Lab

Due on Fri, 02/18 @ 11:59PM. 5 Points.

In today’s lab, your peer mentor will be walking you through how to implement the Follow / Unfollow functionality from HW04 (including how to make it accessible). Sarah has also made a video walkthough of Lab 6, if you would like to take a look at one approach to building the interactions. Feel free to code along with the video or do it your own way!

Your Task

Before beginning the lab, please complete sections 1 & 2 (Introduction and Set Up) of HW04. When you’re done, please complete the following tasks:

Num Task Description
1. Right Panel: Suggested Accounts
  • Render an HTML representation of suggested user accounts in the right-hand panel (just like in HW1 & HW2) using data from the /api/suggestions endpoint.
2. Follow Account
  • When the user clicks the follow button of an "unfollowed" account, a POST request is issued to the /api/following endpoint.
  • If the POST response indicates success, redraw the button to indicate that you are now following the account.
3. Unfollow Account
  • When the user clicks the unfollow button of an "followed" account, a DELETE request is issued to the /api/following/<id> endpoint.
  • If the DELETE response indicates success, redraw the button to indicate that you are no longer following the account.
4. Accessibility: Keyboard Navigation
  • Ensure that all of the buttons are tabbable
  • Ensure that all the event handlers can be triggered using the "spacebar" or "enter / return" keys.
  • Hint: if you use the HTML <button></button> element for all of your buttons, you get this functionality for free.
5. Accessibility: Aria attributes
  • Use the 'aria-label' and 'aria-checked' attributes to indicate to the screen reader whether the follow / unfollow buttons are turned on or off.

screen shot of the post panel

What to Turn In

To submit Lab 6, please upload a zip file that contains the HTML, CSS, and JavaScript files that make your follow / unfollow code work. If it’s easier, you can just zip and submit your entire photo-app directory.