Joke Teller
This web application utilizes modern web development techniques to create a fun and interactive experience for users, allowing them to hear random jokes generated from the Joke API. Using the Fetch API and asynchronous JavaScript functions like async/await, jokes are dynamically retrieved and spoken aloud using the VoiceRSS API's text-to-speech feature. To enhance the user experience, the app features a clean and responsive design, compatible with desktop, tablet, and mobile devices.
Link to project:
- Live Site URL: Netlify
Screenshot
Mobile View
Desktop View
How It's Made:
Tech used: HTML, CSS, JavaScript, Fetch API, VoiceRSS API
This project uses HTML, CSS, and JavaScript to create a simple but effective joke-telling web app. The Joke API is used to dynamically retrieve and display random jokes, while the Fetch API and asynchronous JavaScript functions like async/await are used to handle the data retrieval process. The VoiceRSS API is used to generate text-to-speech audio for each joke.
Optimizations:
In the future, I plan to further optimize the user experience with additional features, such as the ability to share jokes on social media platforms. Additionally, I aim to enhance the design using CSS frameworks like Bootstrap for greater customization and consistency.
Lessons Learned:
This project provided me with valuable experience in working with asynchronous JavaScript functions like async/await, as well as handling data retrieval and manipulation using the Fetch API. Additionally, I gained proficiency in using third-party APIs, and the text-to-speech feature provided by the VoiceRSS API.
Author
- Github - BK Pecho
- Twitter - @bkpecho
- LinkedIn - in/bkpecho
- FrontEnd Mentor - BK Pecho
For other examples of my work, check out these projects:
- Quote-Generator: GitHub Repository
- Infinite Scroll: GitHub Repository