Last updated: Wed Nov 3 11:18:02 PDT 2021

CS 124-Lab 4

In this lab, you'll update lab 3 to:

make your application accessible
add support for multiple lists (rather than just a single list of tasks).
add support for multiple screen sizes (desktop/mobile/landscape/portrait).

Getting started

As you are doing the implementation, you will likely want/need to change parts of the design. That's OK, but the changes and rationale should be documented in design.md.

Your work should be done in a branch named lab3.

$ cd ~/cs124/lab
$ git checkout lab3 	
$ git checkout -b lab4 	# creates a new branch named lab4 based on lab3 and checks it out
$ git push -u origin lab4 # pushes the new branch to the origin

Accessibility

Among others, make sure you can provide support for:

users with low vision (trouble seeing small print or objects)
users who can't use a mouse
users who can't see at all (using a screen reader)

Please record a video showing:

Using your application entirely from the keyboard, and
Using your application using a screenreader.

Provide a link to this video (which can be hosted on a site like YouTube) in your design doc.

Hand-In Procedure

You will turn in your labs using git and GitHub.

$ git commit -am "my last commit"
[lab1 c2e3c8b] my last commit
 2 files changed, 18 insertions(+), 2 deletions(-)

$ git push

Deploy your app to GitHub Pages so that https://{GITHUBUSERNAME}.github.io/cs124/ shows your running application.

You will then need to go to GitHub.com and create a pull request whose base is lab3 and whose compare is lab4. That is, you'll be submitting the changes between lab3 and lab4. This pull request should show, for example, changes between the lab3 and lab4 design.md rather than showing the entirety of the design.md as new.

Detailed instructions on creating a pull request on GitHub

Go to Pull Request tab on GitHub
Click on "New pull request".
Select 'lab3' as the base branch and 'lab4' as the compare branch .
Verify that the commits that are chosen are correct, and that the code that is shown as different is correct.
Click on "Create pull request".
In the right-hand column, click on the gear icon next to Reviewers
Type "nrhodes-hmc" and click on the GitHub name in the list below.
Click on "Create pull request".

Deliverables

You'll submit a GitHub branch named lab3 containing, at the top level,:

teams.txt: the file from Lab 1 containing team member names and GitHub ids.
docs directory containing:
- docs/design.md A design document (updated, as necessary, from lab1) (in Markdown format) that describes (either all in one markdown file or with links to others):
  - your design decisions, including their rationale (include images)
  - alternative designs you considered, including images
  - any user testing you did
  - the final design, including screen images and the flow for each task.
  - challenges you faced
  - parts of the design you're most proud of
- any needed images or markdown files referenced from design.md.
All the files/directories for your React application, including:
- README.md (modified as appropriate for your project). Please add a link to your running application in this file.
- package.json
- src: directory containing your .js and .css files. Remove any unneeded files.
- public: directory containing:
  - index.html: your initial HTML page.
  - favicon.ico: your icon (shows up next to title in web browser)
  - *.png: Other sized icons.
  - manifest.json: information to browser about web app. References .png files

Before creating your pull request, go to GitHub and verify that:

https://{GITHUBUSERNAME}.github.io/cs124/ shows your running application.