A fun and interactive JavaScript project that fetches random jokes from an API and presents them like a late-night comedy show — complete with a spotlight effect, dramatic punchline reveal, and even a laugh track!
- Fetches random jokes using the Official Joke API
- Shows the joke setup first, then reveals the punchline after a short pause
- Plays a laugh sound to enhance the experience
- Clean dark theme with spotlight-style container
- Responsive design with smooth transitions
This small project helped me understand and implement:
- JavaScript basics: variables, functions, DOM manipulation
- Async JavaScript: using
fetch(),.then(), and how APIs work - Error handling with
.catch()for graceful fallback - DOM manipulation with
innerHTML, event listeners - How to work with audio in JS
- CSS styling for animation, transitions, spotlight effect
- Working in GitHub Codespaces and hosting assets (like
laugh.mp3)
- HTML5
- CSS3
- JavaScript (ES6)
- Fetch API
- GitHub Codespaces
- Clone the repo
- Upload
laugh.mp3in the same folder as yourindex.html - Open
index.htmlin browser - Click the button to get a fresh joke and laugh along!
- Jokes API: official-joke-api.appspot.com
This project is open-source. Feel free to improve, remix, or laugh harder!
Made with ❤️ by Shruti Chandra