Level 3

Dad joke generator

Randomly generate dad jokes on-demand with a click of a button. This Challenge is a great way to learn the basics of using an API!


Your Challenge is to create a random dad joke generator. When you click the "Tell me!" button, the answer to the joke reveals. A new dad joke appears when you click the "New joke!" button. You'll use this dad joke API to fetch jokes, so this Challenge is a great way to learn the basics of using an API! 

Your Challenge is complete when:

  • The website is as close to the original design as possible

  • The website is responsive and viewable on multiple screen sizes

  • Elements have the correct state styles (hover, focus, etc.)

  • Clicking the "Tell me!" button reveals the answers

  • Click the "New joke!" button shows a new joke

What's included

Challenges include all the assets you would expect from a designer in real-world projects, plus some resources to help you complete the Challenge.

  • Organized Figma design file
  • Detailed desktop, tablet, and mobile layouts
  • Comprehensive design system
  • Relevant fonts, colors, SVGs, and images
  • Alternative Solutions from members
  • Straightforward quick-start guide
  • Recommended list of learning resources
  • Access to community Discord channels