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

1

2

3

Stretch Goals

Integrate AJAX requests to at least one relevant external API into your portfolio

Links

4

5

Video

6

Video

7

Video

8

9

Video

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

APIs

$.get("http://URL", callBackFn)

$.post("http://URL", {"json":"json"}, callBackFn)

27

28

29

Code

function addProject(result) {
  var projectHTML = '<a href="#" class="thumbnail">' +
    '<img src="' + result['image'] + '" class="img">' +
    '<p>' + result['title'] + '</p>' +
    '<p><small>' + result['date'] +
    '</small></p></a>';

}

30

31

Video

32

Links

33

Terminal

$ bash lab6/check-setup.sh

Debug

I got the error 

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

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

34

Terminal

$ sudo bash lab6/check-setup.sh

Debug

What's the vagrant password?

vagrant

35

36

Links

Debug

I get a blank page!

Make sure node is running (see previous slide).

37

38

Links

39

40

41

Hint

I'm having trouble figuring out how to select the right div!

Try looking at lab 3, slide 21

42

43

44

45

46

Links

47

48

Code for changing CSS of page

$('body').css('background-color', colors[0]);
$('.thumbnail').css('background-color', colors[1]);
$('h1, h2, h3, h4, h5, h5').css('color', colors[2]);
$('p').css('color', colors[3]);
$('.project img').css('opacity', .75);

49

Video

50

51

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

52

Links

53

54

API - Cross-domain request security

$.get('http://foobar.com', callbackFunction, 'jsonp')

55

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