jQuery Exercises

jquery-exercises.md

Here are some mini exercises to challenge your jQuery skills a bit.

Instructions

Create a new page on jsbin.com and add the following script tag to it:

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

(Alternatively, you can use the "Add Library" menu and choose any version of jQuery.)

Then paste in the proper HTML and JS in the panes and follow the exercise instructions.

Exercise 1

HTML

<button id="clicker">Click me to show a hidden secret!</button>
<div id="secret" style="display: none">I am a hidden secret.</div>

Instructions:

1. Add jQuery code that fades in the text "I am a hidden secret" whenever the button is clicked.
2. Change your jQuery code so it slides down the text instead of fading it in.
3. Change the button text to say "Click me to toggle a hidden secret!" and make the text toggle between fading in and out each time it is clicked.

Exercise 2

HTML

<span>Enter your name:</span>
<input type="text" id="name">
<button id="greet">Greet me!</button>

JavaScript

// Call say("Hi!") to have your computer say hi!
// This only works on recent versions of Safari
// and Chrome at the moment.
function say(text) {
  var msg = new SpeechSynthesisUtterance(text);
  window.speechSynthesis.speak(msg);  
}

Instructions:

Add jQuery that greets the user by calling the above say function whenever the user clicks the "Greet me!" button, taking into account the value of the text field.

For example, if the user types the word "Bob" into the text field, then the computer should say "Hello Bob!" when the button is clicked.

Exercise 3

HTML

<button id="clicker">Click me to hide the hidden secrets!</button>
<p class="secret">I am hidden secret #1.</p>
<p class="secret">I am hidden secret #2.</p>
<p class="secret">I am hidden secret #2.</p>
<p>I am <em>not</em> a hidden secret.</p>

Instructions:

Add jQuery code to modify the page so that when the user clicks the button, the paragraphs that start with the words "I am a hidden secret" slide up.

Exercise 4

<img src="http://hackasaurus.toolness.org/images/goggles/supergirl.png">
<p>
  <button id="clicker">Click me to change the picture</button>
</p>

Instructions:

Change the page with jQuery so that when the button is clicked, the image changes to this:

Hint: Change the src attribute of the image.

Findings from today's class:

• The instructions for exercise 2 were confusing. Might be easier to first have students paste in the say source and use it directly from the console first? The notion that the computer could actually say stuff out loud was confusing to them until they actually tried calling the function to see what happened.
• jQuery's "fail silently" behavior that happens when a selector doesn't select anything was really confusing for students, because they'd misspell their selector (e.g. clicker or #cliker instead of #clicker) and their program would run, but no errors would be logged to the console. I ended up telling them to pepper their code with console.log()'s to confirm that their code was actually being called...