CS 124-Lab 1

• In an empty list, create an item named "Buy new John Grisham book"
• In a non-empty list, create an item named "Eat Lunch"
• Mark the item named "Call Mom" completed (assumes there exists an item named "Call Mom").
• Rename the item "Text John" to "Text John about bank statements" (assumes there exists an item named "Text John").
• Show only uncompleted items.
• Delete all completed items.

The interface should be presented as a series of html pages designed for a 360x640 pixel portrait-mode mobile display. The easiest way to test this is with Chrome. Open the Developer Tools (View->Developer->Developer Tools), and then click on the Toggle Device icon () in the developer tools tab. It'll change the viewport of the webpage. Select "Moto G4" to get a viewport of size 360x640).

For each task, show a webpage containing:

• the state of the screen at the beginning of the task
• the state of the screen at the end of the task
• the state of the screen during intermediate portions of the task as necessary

The final design is done in this fashion so that you have a target for lab 2 as to the HTML your application will need to generate.

Git Setup

We'll be using Git as a way to manage your labs and GitHub as a mechanism for submitting your labs. To learn more about Git, take a look at the Git user's manual, or, if you are already familiar with other version control systems, you may find this CS-oriented overview of Git useful.

1. Create a GitHub account
If you don't already have a GitHub account, you'll need to create one. Go to github.com and create an account.
2. Setup SSH keys to avoid providing username and password to git each time you use it on the command line.
In order to push changes to your GitHub repository you'll need to provide credentials to GitHub. That can be done by providing your GitHub username and password each time you interact with the remote repository. A simpler way, though, is to provide an SSH public key to GitHub. Follow the directions at Connecting to GitHub with SSH.
3. Only one person per pair programming team should do this part!
   1. Create a new public repository named cs124
   On GitHub, click on the + menu item at the top right, and select "New Repository". Set the following fields:
   • Your new repository details (name): cs124
   • Privacy: Public
   Then, click "Create repository". Once it's created, you can go to https://www.github.com/<your username>/cs124.
   2. Add instructor as collaborator
   You'll need to add me as a collaborator (so that I can see your repository in order to do grading and provide comments on your labs). To do so, click on the "Settings" tab for your repository. On the left-hand-side, click Manage access and click on "Invite a collaborator. Type "nrhodes-hmc", select "nrhodes-hmc" from the resulting popup, and click the Add button.
   3. Add your teammate as a collaborator
   You'll need to add your teammate as a collaborator (so that they can check code in and out of the repository). Follow the same procedure as above.
4. Clone the repository onto your local machine
To install the files in your local machine, you need to clone the course repository, one person should run the commands below.

$ mkdir ~/cs124
$ cd ~/cs124
$ git clone git@github.com:{USERNAME}/cs124.git lab #where {USERNAME} is your GitHub user name.
Cloning into lab...
$ cd lab
$ git branch lab1 # creates a branch for lab1	
$ git push -u origin lab1 # pushes the new branch to the origin

5. Now, the other teammate can do:

   $ mkdir ~/cs124
   $ cd ~/cs124
   $ git clone git@github.com:{USERNAME}/cs124.git lab #where {USERNAME} is  GitHub user name containing the repository.
   Cloning into lab...
   $ cd lab
   $ git checkout lab1 # switches to the empty lab1 branch.
   

You can work separately on individual repositories, but then will likely need to figure out how to resolve conflicts when doing a git pull if your teammate has made changes to the main repository. So there are now three repositories:

• origin:
your public GitHub repository: https://github.com/{USERNAME}/jos.git
• local:
your local repository (will actually be one for each teammate).

• Pull changes from your local repository (that may have been made by your teammate) using git pull).
• make changes in your local repository.
• push those changes to your origin (using git push).

Git allows you to keep track of the changes you make to the code. For example, if you are finished with one task from a lab, and want to checkpoint your progress, you can commit your changes by running:

$ git commit -am 'My explanatory comment for the code I am checking in'
Created commit 60d2135: My explanatory comment for the code I am checking in
 1 files changed, 1 insertions(+), 0 deletions(-)
$ 

$ git push

You can keep track of your changes by using the git diff command. Running git diff will display the changes to your code since your last commit.

So that I can tell who the team-members are (because GitHub usernames aren't always clear), create a file named team.txt and, on separate lines, add GitHub username followed by your full names. When you're done, add it to the repository:

$ git add team.txt
$ git commit team.txt -m "Add team.txt file"
$ git push
$

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

Deliverables

• teams.txt: the file described above containing team member names and GitHub ids.
• design.md A design document (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 of your final design HTML, CSS, and (possibly) image files.

  These files should be the source of the final design screen images in the design document.

  In Lab 2, you'll write code to generate similar HTML, and use the CSS from Lab 1, possibly as-is, to style that generated HTML.

• index.html which contains links to all of the final design HTML pages.

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

• design.md correctly displays your design document, and that
• https://{GITHUBUSERNAME}.github.io/cs124/ shows the link to all of your final design HTML pages, and that each of those pages correctly displays.