Skip to content

Instantly share code, notes, and snippets.

Whack-a-mole!

Oh no, my yard is infested with moles! Help me whack them! Follow the instructions below to use jQuery to remove each mole!

Let's start with the first mole at the top. It has the ID mole1. How do we fix the code provided on lines 1-3 so that the mole disappears when we click on it? Hint: You'll need to change the selectors from "FIXME" to the name of mole you want to hide.

Did you get rid of the first mole?! YES? GREAT!

Now let's get rid of the others. Look at the HTML fo find the IDs of the second and third moles. Can you fill in the missing jQuery on lines 5-11 to get rid of the other moles? Use the first click handler to help you!

Let's write the code that will let us play this game again. Fill in the selectors in the last click handler (lines 13-15) so when you click on the button all the moles show.

Whack-a-mole!

Oh no, my yard is infested with moles! Help me whack them! Follow the instructions below to use jQuery to remove each mole!

Let's start with the first mole at the top. It has the ID mole1. How do we fix the code provided so that the mole disappears when we click on it?

Did you get rid of the first mole?! YES? GREAT!

Now let's get rid of the others. Look at the HTML fo find the IDs of the second and third moles. Can you fill in the missing jQuery to get rid of the other moles? Use the first click handler to help you!

let's write the code that will let us play this game again. Fill in the selectors in the last click handler so when you click on the button all the moles show.

DogBook

Congratulations! You've just been hired to help DogBook add some sorely needed structure to their website. Here's what needs to be done:

  1. Nest the h1 in a div with class header.
  2. Nest the last p in a div with class footer.
  3. Nest the first h3 and ul in a div with class menu.
  4. Nest the second h3 and ul in a div with class park.
  5. Nest the menu and park divs inside another div with class main.

DogBook

Congratulations! You've just been hired to help DogBook add some sorely needed structure to their website. Here's what needs to be done:

  1. Nest the h1 in a div with class header.
  2. Nest the last p in a div with class footer.
  3. Nest the first h3 and ul in a div with class menu.
  4. Nest the second h3 and ul in a div with class park.
  5. Nest the menu and park divs inside another div with class main.

Directions

  1. Create an h1 tag that says, "My First Website"

  2. Create a p tag that says, "This is so fun! But I need how to figure out how to make things bold."

  3. Make the word bold BOLD.

  4. Create a new paragraph that says, "Now for italics."

Directions

  1. Create an h1 tag that says, "My First Website"

  2. Create a p tag that says, "This is so fun! But I need how to figure out how to make things bold."

  3. Make the word bold BOLD.

  4. Create a new paragraph that says, "Now for italics."

#Directions

  1. Create an h1 tag that says, "My First Website"
  2. Create a p tag that says, "This is so fun! But I need how to figure out how to make things bold."
  3. Make the word bold BOLD.
  4. Create a new paragraph that says, "Now for italics."
  5. Make the italics italic.

Bonus Challenges:
Try these tags:
  1. Create an h1 tag that says, "My First Website"

2. Create a p tag that says, "This is so fun! But I need how to figure out how to make things **bold**."
3. Make the word bold **BOLD**.
4. Create a new paragraph that says, "Now for *italics*."
5. Make the italics *italic*.
  1. Create an h1 tag that says, "My First Website"

2. Create a p tag that says, "This is so fun! But I need how to figure out how to make things bold."
3. Make the word bold **BOLD**.
4. Create a new paragraph that says, "Now for *italics*."
5. Make the italics italic.
  1. Create an h1 tag that says, "My First Website"

2. Create a p tag that says, "This is so fun! But I need how to figure out how to make things bold."
3. Make the word bold **BOLD**.
4. Create a new paragraph that says, "Now for *italics*."
5. Make the italics italic.