Assignments > HW5: Building a Data-Driven Client: Part 2

Due on Mon, 03/13 @ 11:59PM. 25 Points.

1. Introduction

In this assignment, you will be enhancing your HW4 interface by implementing some event handlers to interact with a REST API – in order to “like,” bookmark, and comment on posts; and to follow new users.

2. Set Up

Before you begin enhancing your interface, create a branch to “remember” your HW4 version of the code (so that you can easily revert back to it if need be). To do this, navigate to your photo-app directory on the command line and type the following:

git branch    # tells you what branch you're currently on.
git checkout -b hw04   # creates and switches to a new branch 
git push --set-upstream origin hw04  # creates a remote copy of your new branch on GitHub
git checkout main   # switches back to the main branch (your branch may be called master instead of main)
git branch    # should tell you that you're back on the main (or master) branch

If you did this correctly…

1. On GitHub, you should see two branches: a main (or master) branch and a hw04 branch.
2. On your computer, When you type git branch on the command line from your photo-app directory, you will see that your main (or master) branch is still the working branch.

3. Your Tasks

1. Create / Delete Data with Event Handlers (16 Points)

After implementing the read-only functionality, you will implement functionality that actually updates the data in your system as follows:

Note that each button click is issuing a request to your API and redrawing the screen (console messages just used for demonstration purposes).

Note that each button click is issuing a request to your API and redrawing the screen (console messages just used for demonstration purposes).

Note that each button click is issuing a request to your API and redrawing the screen (console messages just used for demonstration purposes).

Note that each button click is issuing a request to your API and redrawing the screen (console messages just used for demonstration purposes).

2. Accessibility Features (5 points)

Accessibility can be tricky when you’re relying on the fetch API, because a screen reader doesn’t always know that content has changed on the page. In addition, you don’t want to be over-reliant on the mouse. Please take a look at the Accessibility Resources, and specifically the resources pertaining to aria roles and attributes.

3. Accessibility Reflection (3 Points)

1. In a brief reflective response (about 4-8 sentences total), please consider the following questions:
   • Why, and to whom, is accessibility important?
   • How might you make a site (or app) like Instagram more accessible?
2. What resources did you consult as you implemented the accessibility features? Were there any that you found useful that aren’t on the Accessibility Resources page?
3. Reflect on the work that went into making your website accessible.
   • Was it a lot of additional work?
   • What was the most challenging part?
   • Do you think that designing for accessibility also improves the usability of the site for all users? Why or why not?

4. Commit Everything to GitHub (1 point)

When you’re done, please commit and push everything to GitHub.

1. Instead of creating a brand new Heroku Postgres database, just use the same DB_URL environment variable that you used in HW3. In other words, your HW3 and HW4 Heroku deployments will share a database.
2. Make sure you push your hw05 branch to Heroku: git push heroku hw05:main

4. What to Turn In

Rubric

Please review the requirements above and ensure you have met them. Specifically:

Moodle Submission

When you’re done, please submit the following to the Moodle:

• A link to your GitHub Repository
• A link to your GitHub Pages
• The answers to the accessibility questions
• The name of your partner (if applicable)