Knock Knock Generator

In this project, we're going to make a knock-knock joke generator!

Click here to view fullscreen.

1. Give your page a title.

2. Create a button that says "Click here for a joke!". Make sure to give your button an id.

3. Create two more buttons -- "Who's there?", and "...who?" -- give them id's.

4. Use CSS to make the "Who's there?" and "...who?" buttons hidden.

5. Above the buttons, create an empty span. Give it an id.

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 span...

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 span!)

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!