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