Quote Generator with Audio - HTML, CSS, & JavaScript Tutorial

Published: 02 February 2023
on channel: Jeff Claybrook

215

TLDR;
This is intended to be equal parts funny and informative
Semantic HTML
Basic CSS
Vanilla JavaScript
Fetch JSON with async/await
Generate a random Trump quote
Play the soundbite of the Trump quote
Copy the Trump quote
Toast alert when quote copied

Demo link:
https://jeffclaybrook.github.io/Donal...

Source code:
https://github.com/jeffclaybrook/Dona...

JSON file:
https://raw.githubusercontent.com/jef...

In this tutorial, you'll create a Donald Trump random quote generator using HTML, CSS, and vanilla JavaScript.

Overview
Fetch a random quote
Play the quote soundbite
Copy the quote text
Display a toast alert when quote copied

NOTE: My computer's audio output is messed up, which is why you won't hear the audio sound bites when I click the play button.

Timestamps:
00:00 - HTML
01:45- CSS
07:55 - JavaScript

Feedback is always welcome! Happy coding!

On this page of the site you can watch the video online Quote Generator with Audio - HTML, CSS, & JavaScript Tutorial with a duration of hours minute second in good quality, which was uploaded by the user Jeff Claybrook 02 February 2023, share the link with friends and acquaintances, this video has already been watched 215 times on youtube and it was liked by 5 viewers. Enjoy your viewing!

262