CS396: Spring 2022

Intro to Web Development

CS396: Spring 2022

Assignments > Lab 7. Fetch API Lab

Due on Fri, 05/13 @ 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 7, if you would like to take a look at one approach to building the interactions. This walkthrough was made during the winter quarter (when it was “Lab 6”), but the lab is the same. Feel free to code along with the video or do it your own way! In the lab, the following tasks are covered:

  1. Making the HTML & CSS for the suggested accounts.
  2. Populating the suggested accounts using the REST API.
  3. Getting the “Follow” button to create a new following record using the REST API.
  4. Getting the “Unfollow” button to remove an existing following record using the REST API.
  5. Ensuring that the UI is accessible.

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 7, 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 (minus your env and git directories).