Dad joke generator with React
Build a dad joke generator using React, fetch jokes from an API, and implement an Abort Controller for efficient request handling.
Next.js
Tailwind CSS
Axios
Free
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!
Overview
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