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.