In this project, we're going to make a knock-knock joke generator!
1. Give your page a title.
2. Create a button that says "Click here for a joke!". Make sure to give your button an
3. Create two more buttons -- "Who's there?", and "...who?" -- give them
4. Use CSS to make the "Who's there?" and "...who?" buttons hidden.
5. Above the buttons, create an empty
span. Give it an
6. When the "Click here for a joke!" button is clicked, make the button hide...
7. ...and make the empty
span say "Knock knock"...
8. ...and make the "Who's there?" button appear.
9. Think up your best Knock Knock jokes (or find some on the internet). Then, create one array that holds the response to "Who's There?" and one array that holds the punchlines.
(Hint: The name and the punchline that go together should have the same index location in the two different arrays)
10. Write a function that randomly selects a joke from your joke arrays.
11. When the "Who's there?" button is clicked, run your function to choose a joke...
12. ...and, in the empty
span, replace "Knock knock" with the first part of the chosen joke...
13. ...and make the "...who?" button appear, but replace the text in that button with the word from the joke.
(for example: "Orange who?" or "Boo who?")
14. When you click the "...who?" button, make that button disappear...
15. ...and make the punchline of the joke replace the text in the empty
16. ...and have the "Click here for a joke!" button reappear.
17. Make sure everything works right when you click the button again.
(don't forget to clear the empty
18. Keep working on your project until you're happy with it. You can make it look cool, add different features, think up more jokes, etc.
19. Save and share your project!