These challenges can be completed in cloud9 or popcode. Use Google or your reference table for guidance!
Here's your starter code: popcode starter code
# | Name | Challenge | Example |
---|---|---|---|
1 | jQuery | There's an error on the page. What do we need to do before we can use jQuery? | |
2 | Boo | There's a click handler for the Boo button, but the alert is commented out. Uncomment the alert so clicking the Boo button causes the alert "Boo". | |
3 | Show | Make it so clicking the "Show" button causes the image with the class "it-gif" to be visible. You'll want to use the jQuery show method. | |
4 | Hide | Make it so clicking the "Hide" button causes the image with the class "it-gif" to be hidden. You'll want to use the jQuery hide method. | |
5 | Toggle | Make it so clicking the "Toggle" button causes the image with the class "it-gif" to switch between being visible and hidden. You'll want to use the jQuery toggle method. | |
6 | Text | Make it so clicking the "Text" button causes all the button elements to have the text "Boo" (or whatever text you'd like). You'll want to use the jQuery text method. | |
7 | CSS | Make it so clicking the "CSS" button causes all the h4 elements to have a color of orange. You'll want to use the jQuery css method. | |
8 | Attribute | Make it so clicking the "Attr" button causes the image shown by exercise 3 to have the src equal to https://i.imgur.com/tn5ZVuP.gif. You'll want to use the jQuery attr method. | |
9 | Ghost | You may have noticed the addGhost function defined in the JavaScript section. Make it so clicking the "Ghost" button calls that function. You should see another ghost flying around each time it's clicked. | |
10 | For Loop | You may have noticed the addGhost function defined in the JavaScript section. Make it so clicking the "For Loop" button calls that function 10 times (using a for loop). You should see another 10 ghosts flying around each time it's clicked. | |
11 | Curse | There's a click handler that gets called when the "Curse" button is clicked. It has an empty array called "names" that is empty. As a result, clicking the button causes a popup with the word "undefined". Fill the array with at least 3 names so it will randomly show one of the names in the popup instead of "undefined" |
# | Name | Challenge |
---|---|---|
1 | Alert | Change the text in the alert triggered by clicking "Boo" to show some other text |
2 | Music | There's an audio element in the HTML with the ID "spooky-scary-skeletons". Make it so clicking the "Music" causes the audio element to play. You'll need to do some googling to figure out how! |
3 | Hover | There's an audio element in the HTML with the ID "boo-laugh". Make it so hovering over one of the ghosts causes the audio element to play. |
4 | Confirm | Make it so clicking the "Confirm" button causes a confirm popup with the text "Want to see something scary?" to show up. If the user clicks "Cancel", nothing should change. If the user clicks "OK", an alert with the word "Boo!" should appear. NOTE - confirm will only work in the full screen Popcode view. |
5 | Prompt | Make it so clicking the "Prompt" button causes a prompt popup with the text "Whose haunted house is this?" to show up. Whatever the user enters (like their name), should then replace "Your name" in the text "Your name's Invite List". NOTE - prompt will only work in the full screen Popcode view. |
6 | Invite | Make it so clicking the "Add" button causes whatever text is in the input to be added to the list of invitees |