Lab 3 · HCI Design

When done, submit here.

1

2

Student examples

Check out these awesome examples from your peers!

3

4

5

6

7

8

9

10

11

12

13

14

15

Video

JS Bin

16

JS Bin

17

18

19

20

21

22

23

24

25

26

27

28

29

30

JS Bin

31

Facebook Like

Class Homepage Highlight

Reddit Highlight

32

33

JS Bin

34

JS Bin

35

36

Video

37

38

Github Link

https://github.com/IntroHCI/lab3

39

Video

Code

...

	<script src="https://code.jquery.com/jquery.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/introHCI.js"></script>
</body>
</html>

40

41

Video

42

Code

$("a.thumbnail").click(projectClick);

43

Code

function projectClick(e) { 
    // prevent the page from reloading      
    e.preventDefault();
    // In an event handler, $(this) refers to      
    // the object that triggered the event      
    $(this).css("background-color", "#7fff00");
}

44

Video

45

46

47

Code

function projectClick(e) { 
    console.log("Project clicked");
    e.preventDefault();
    $(this).css("background-color", "#7fff00");
}

48

Opening Debug Console

Hints

I don't see Javascript Console in my chrome menu.

You have a newer version of Chrome! You can access the console through Developer Tools->Console Tab

49

Reading Console Output

Set Breakpoint

Troubleshoot

When I click the 'Sources' tab, I don't see the tree-view on the left, with the 'js' folder in it.

Look for the box with the triangle in it just below the magnifying glass in the upper left hand corner of the dev tools panel. Click on that to expand out the tree-view.

Trigger Breakpoint

Remove Breakpoint

Troubleshoot

Why does the console say

event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

Don't worry about this. It isn't our fault. We can safely ignore this warning.

50

Code

function projectClick(e) {
  // Cancel the default action, which prevents the page from reloading
    e.preventDefault();

    // In an event listener, $(this) is the leement that fired the event
    var projectTitle = $(this).find("p").text();
    var jumbotronHeader = $("#jumbotron h1");
    jumbotronHeader.text(projectTitle);
}

51

52

Solution

53

Code

var jumbotronHeader = $(".jumbotron h1");

54

55

Code

...
    var containingProject = $(this).closest(".project");
    containingProject.append("<div class='project-description'><p>Description of the project.</p></div>");
}

56

Video

57

Code

...
    var containingProject = $(this).closest(".project");
    var description = $(containingProject).find(".project-description");
    if (description.length == 0) {
       $(containingProject).append("<div class='project-description'><p>Description of the project.</p></div>");
    } else {
       description.html("<p>Stop clicking on me! You just did it at " + (new Date()) + "</p>");
    }
}

58

Troubleshoot

Wait, what am I doing on this slide?

The big blue button that says "Test Javascript". See it? When you click it, it's text should change to something else.

What should I change the text to?

Experience Chan! It's not a lot of questions.
Too many questions is the Chan disease.
The best way is just to observe the noise of the world.
The answer to your questions?
Ask your own heart.

59

60

Code

$("#testjs").text("Please wait...");

61

Code

$(".jumbotron p").addClass("active");

62

Video

Code

.jumbotron p.active {
     color: #1f6ddd;
}

63

Video

Code

$(".jumbotron p").toggleClass("active");

64

65

Hints

Check the jQuery Basic effects documentation
Check the jQuery Fading effects documentation

66

67

Video

Hint - Selectors from index.html

...
  <form id="projectForm" role="form">
    <div class="form-group">
      <label for="project">Please change the project:</label>
      <select class="form-control" id="project">
        <option value="#project1">Waiting in line</option>
        <option value="#project2">Needfinding</option>
        <option value="#project3">Prototyping</option>
        <option value="#project4">Heuristic evaluation</option>
        <option value="#project5">Visualization</option>
        <option value="#project6">Social design</option>
        <option value="#project7">Gestural interaction</option>
        <option value="#project8">Design tools</option>
      </select>
    </div>
    <div class="form-group">
      <label for="width">To width (in pixels):</label>
      <input type="number" class="form-control" id="width" placeholder="Width">
    </div>
    <div class="form-group">
      <label for="description">And to description:</label>
      <input type="text" class="form-control" id="description" placeholder="Project desicription">
    </div>
    <button id="submitBtn" type="button" class="btn btn-default">Submit</button>
  </form>

  <script src="https://code.jquery.com/jquery.js"></script>
...

Hints

Check the jQuery Animate effect documentation

68

69

Video

Code

function initializePage() {
   ...
    $("#submitBtn").click(updateProject); 
} 

function updateProject(e) {
   var projectID = $('#project').val();
   $(projectID).animate({
      width: $('#width').val()
   });

   var newText = $('#description').val();
   $(projectID + " .project-description").text(newText);
}

70

71

72

GitHub - Commit

git add static/index.html 
git add static/js/introHCI.js 
git add static/css/introHCI.css 
git commit -m “javascript lab”

Github - Push

git push

Heroku - Create

heroku create
heroku apps:rename newapplicationname

Heroku - Push

git push heroku master

73

74

Stretch Goals

Toggle project descriptions when you click on a project.

When done, submit here.