Skip to content

Instantly share code, notes, and snippets.

@courtney-scripted

courtney-scripted/README.md

Last active February 9, 2018 19:11
Show Gist options
  • Save courtney-scripted/0120844cbd1299fdbd7478851494b915 to your computer and use it in GitHub Desktop.
Save courtney-scripted/0120844cbd1299fdbd7478851494b915 to your computer and use it in GitHub Desktop.
Download ZIP
Exported from Popcode. Click to import: https://popcode.org/?gist=0120844cbd1299fdbd7478851494b915
Raw
README.md

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.

BONUS

Now if you've ever dealt with moles you know that you can never get rid of them!

Instead of hiding the third mole, make the other moles appear when a user clicks the third mole.

HINT: What's the opposite of .hide()?

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Whack-A-Mole</title>
</head>
<body>
<div class="game">
<div class="yard">
<img src="https://i.imgur.com/70uqcLG.png">
</div>
<div class="yard">
<img id="mole1" src="https://i.imgur.com/AmtqfIs.png">
</div>
<div class="yard">
<img src="https://i.imgur.com/70uqcLG.png">
</div>
<div class="yard">
<img id="mole2" src="https://i.imgur.com/AmtqfIs.png">
</div>
<div class="square">
<img src="https://i.imgur.com/70uqcLG.png">
</div>
<div class="square">
<img src="https://i.imgur.com/70uqcLG.png">
</div>
<div class="square">
<img src="https://i.imgur.com/70uqcLG.png">
</div>
<div class="square">
<img src="https://i.imgur.com/70uqcLG.png">
</div>
<div class="yard">
<img id="mole3" src="https://i.imgur.com/AmtqfIs.png">
</div>
<button>Reset</button>
</div>
</body>
</html>
Raw
popcode.json
{"enabledLibraries":["jquery"],"hiddenUIComponents":["console","editor.css"]}
Raw
script.js
$("INCORRECT").click(function(){
$("INCORRECT").hide();
});
$("INCORRECT").click(function(){
$("INCORRECT").hide();
});
$("INCORRECT").click(function(){
$("INCORRECT").hide();
});
$("INCORRECT").click(function(){
$("INCORRECT").show();
});
Raw
styles.css
body {
background: #9de45b;
}
.game {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
margin: 0 auto;
width: 600px;
}
.yard {
width: 200px;
}
img {
width: 200px;
height: 196px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment