When done, submit here.

1

2

Student examples

  • Check out these awesome lab 5 stretch goals from your peers

3

4

How will this lab help me?

This lab will get you well-versed in serving data from the server, and changing your page without refreshing the page. They form an important portion of your app. Especially, Assignment 7 includes these tasks!

5

6

Video

7

Video

8

Video

9

10

Video

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

APIs

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

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

29

30

31

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>';

}

32

33

Video

→ Your part starts here.

34

Links

35

Terminal

$ bash lab6/check-setup.sh

Troubleshoot

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.

36

Terminal

$ sudo bash lab6/check-setup.sh

Troubleshoot

What's the vagrant password?

vagrant

37

38

Links

Troubleshoot

I get a blank page!

Make sure node is running (see previous slide).

39

40

Links

41

Links

42

Troubleshoot

Wait what's the callback?

Check back on slide 14 and 15. The callback will be called once your $.get(<URL>, <callback>); inside the addProjectDetails completes, and will have the result of the GET passed in. If you're extra curious it's the success parameter mentioned in the jquery.get documentation.

43

Hint

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

Try looking at lab 3 slide 24 for selecting the correct class based on the id. Once you've done that, you're one step away.

I'm still having problems picking the details class out for the specific project id!

Yes this is an interesting selector puzzle! You can use selectors to select a hierarchy like so: slide 22-Selectors:space indicate hierarchy or jQuery: Descendant Selector. If you want more practice with selectors, have fun with this game: CSS Diner.

Wait, wait! Where do I get the ID from?

Ah... another thinker! Without giving too much away, take a look at what is inside the result variable.

44

Hint

What should it look like when I click a project?

Also see the video in slide 33

How do I create the HTML string?

Check back on slide 15. It will be very similar to the way we construct the string variable projectHTML in that slide.

45

46

47

48

Links

49

50

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);

51

Video

52

53

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

54

Links

55

Stretch Goals

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

Links

56

57

API - Cross-domain request security

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

58

When done, submit here.