If I had to create a Random Quote app, THIS is how I would do it.

In this tutorial, you’ll learn how to not only code a Random Quote Generator app but also learn how to work with multiple data sources.

00:00 Intro
01:07 Getting setup with Markup and CSS
03:57 JavaScript class definition
05:11 Getting a random quote
07:35 Using multiple data sources
11:24 Sharing buttons
12:15 Random background colours
14:26 Disabling the New Quote button
15:23 Using a fallback data source

The random quote generator app project is something everyone has a go at whilst they’re learning to code and it’s usually found in lot’s of JavaScript curriculum’s like @freeCodeCamp.org’s.

It’s usually a case of just getting an array of quotes in your JavaScript, picking a random one and then updating some elements on the page with the retrieved quote.

You might even take this to the next level by using a 3rd party API to fetch your quote data.

But what about if you wanted to get the quotes from multiple sources? What happens if one of those sources is offline?

In our tutorial we’ll walk through the basics of creating a random quote app in JavaScript and then we’ll elevate the code by enabling fetching of a quote from one of many data sources.

We’ll also do the standard things like updating the DOM elements on the page, changing the background colour on each update and provide sharing links too.

By the end of the tutorial, you should have a better idea of how to approach a simple project like this with a more professional approach.

#javascript #javascriptproject #javascriptbeginners

Channel Handle @codebubb