https://github.com/bkpecho/joke-teller

This web app uses modern web dev techniques to generate random jokes from the Joke API, read aloud through the VoiceRSS API's text-to-speech feature. With a clean and responsive design, it works seamlessly across desktop, tablet, and mobile devices.
https://github.com/bkpecho/joke-teller

async-await audio browser-compatibility css3 fetch-api flexbox-css html5 javascript javascript-sdk jokes-api rapid-api responsive-design text-to-speech

Last synced: about 1 month ago
JSON representation

This web app uses modern web dev techniques to generate random jokes from the Joke API, read aloud through the VoiceRSS API's text-to-speech feature. With a clean and responsive design, it works seamlessly across desktop, tablet, and mobile devices.

• Host: GitHub
• URL: https://github.com/bkpecho/joke-teller
• Owner: bkpecho
• Created: 2023-04-20T10:50:47.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-04-20T18:32:13.000Z (almost 2 years ago)
• Last Synced: 2024-12-12T20:36:16.081Z (about 2 months ago)
• Topics: async-await, audio, browser-compatibility, css3, fetch-api, flexbox-css, html5, javascript, javascript-sdk, jokes-api, rapid-api, responsive-design, text-to-speech
• Language: JavaScript
• Homepage: https://bk-joke-teller.netlify.app/
• Size: 1.68 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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](https://bk-joke-teller.netlify.app/)

## Screenshot

### Mobile View

![](/src/img/mobile-view.png)

### Desktop View

![](/src/img/desktop-view.png)

## 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](https://www.github.com/bkpecho)

- Twitter - [@bkpecho](https://www.twitter.com/bkpecho)

- LinkedIn - [in/bkpecho](https://www.linkedin.com/in/bkpecho/)

- FrontEnd Mentor - [BK Pecho](https://www.frontendmentor.io/profile/bkpecho)

## For other examples of my work, check out these projects:

- **Quote-Generator:** [GitHub Repository](https://github.com/bkpecho/quote-generator)

- **Infinite Scroll:** [GitHub Repository](https://github.com/bkpecho/infinite-scroll)