When done, http://hci.st/lab-submit.

1

2

3

4

5

6

Links

7

Terminal

$ bash lab5/check-setup.sh

Debug

I got the error 

bash: lab5/check-setup.sh: No such file or directory

Make sure you're in your 'introHCI' directory and that you've cloned lab5 here.

8

Terminal

$ bash lab5/check-setup.sh

Debug

What's the vagrant password?

vagrant

9

10

11

Code

var data = require('../data.json');

12

Terminal

$ node app.js
Express server listening on port 3000

Debug

When I try to run node app.js I get a bunch of error messages, including the line 

Error: listen EADDRINUSE

This probably happened because Node crashed. For instance, Vagrant might have disconnected you all of a sudden.
To fix this problem, tell your browser to refresh http://localhost:3000 until you get "No data received" or a similar message. Now try starting Node again. Everything should be fine.

Explanation: The message EADDRINUSE means that Node can't start listening on port 3000 because it's already in use. The problem is that the last instance of Node failed to properly release port 3000 when it crashed. By refreshing the webpage, we're getting the OS to realize 'Oh, the Node server isn't using port 3000 anymore' and consequently release it.

13

Links

Debug

I get a blank page!

Make sure node is running (see previous slide).

14

15

Debug

I can't load the Javascript at public/js

Files in your /public directory are aliased to root. (HUH?) Suppose you have public/foo.js and you want to import it. Then it would be at localhost:3000/foo.js

16

17

Code

<div class="container">

18

19

Image Link

  • http://lorempixel.com/500/500/people

20

21

22

23

24

25

26

Debug

When I click on the name, it says that it can't find an anagram for that name.

The most common cause here is that your click listener is not listening to the right element. For example, if you put the click listener on the entire div, when you call text(), it will return a bunch of whitespace around the name, and it won't match our list of anagram keys. Make sure you're selecting only the element that actually has the text inside of it.

27

Video

28

29

30

31

32

33

34

35

36

37

GitHub - Commit

git status
git add ... 
git commit -m "putting it together lab"

Github - Push

git push

Heroku - Create

heroku create newapplicationname

Heroku - Push

git push heroku master

38

Links

When done, submit at http://hci.st/lab-submit.