Intro to HCI: Labs

When done, submit at here.

1

2

3

4

5

6

7

8

9

10

11

Stretch Goals

Toggle project descriptions when you click on a project.

12

13

JS Bin

14

JS Bin

15

16

17

JS Bin

19

20

21

JS Bin

22

Facebook Like

CS147 Highlight

Reddit Highlight

JS Bin

23

JS Bin

24

25

Github Link

https://github.com/IntroHCI/lab3

26

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>

27

28

Video

29

Code

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

30

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

31

Video

32

33

34

Code

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

35

Opening Debug Console

36

Reading Console Output

Debug

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.

37

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

38

39

Solution

40

Code

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

41

42

Code

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

43

Video

44

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

45

Debug

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.

46

47

Code

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

48

Code

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

49

Video

Code

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

50

Video

Code

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

51

52

53

54

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>
...

55

56

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

57

58

59

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

When done, submit at http://d.ucsd.edu/class/intro-hci/2015/lab/submit.