Build a Quote Generator using Javascript

As part of our weekend tutorial, we will build a Quote generator using Javascript this time.

Before we implement it, let’s have a glimpse of the final version of what we will make –

This Quote Generator application has the following feature –

1. A button when clicked generate the Quote
2. A Twitter button when clicked put the quote to Twitter

Project Directory Structure

|-- quote-generator
| |-- css
| | |-- style.css
| |-- js
| | |-- main.js
| |-- index.html

After you’ve created the above directories in your local machine, please follow along.

Quote Generator Implementation

Let’s implement the index.html code first.

index.html

At the head of the above HTML file, we have included the quote-specific CSS and font awesome icon CSS (this is for the quote and Twitter icon).

And in the body of the HTML, a quote-container div is added which will hold the quoted content, quote author, Twitter button, and New Quote button.

On click of the New Quote button, the next quote will be generated through AJAX request, and its code is written in the main.js file which has been added at the bottom of the body in the HTML file.

style.css

We are using the Montserrat google font which is added at the top of the CSS file. Quote Container div in the body is centered using the flex.

Rest other CSS codes are self-explanatory.

main.js

The above code is written in vanilla javascript. Let me explain each function in detail –

tweetQuote

This function is responsible for tweeting the quote on Twitter. It calls the tweeter intent API with quoted text and quote-author as a query param.

fetchQuote

This is an async function that is responsible for fetching the quotes and returning the promise for the quotes.

Click listener is bound over the Twitter button and New Quote button which calls the above functions respectively.

Challenges

To show the next quote on click of the New Quote button, we need to have the quotes list beforehand otherwise UX will be really bad.

Now once the API response is received i.e quotes are available, you will feel like storing it to avoid hitting the API again and again on click of the button.

Storing the response is not necessary, yes, you heard it right!

To solve the above without making a request on each button click, we can cache the promise.

A promise is stateful, and as soon as it’s fulfilled, its value cannot be changed. You can use .then() multiple times to get its contents, and you’ll get the same result every time.

So, with quotesPromise.then we will be getting the quotes list each time and there we pick a random quote that is shown on the quote container.

That is all in this tutorial. If you like the article please share it with your friends and community.

Learning Data structure? read my other article — How to implement the stack and reverse it in javascript?

Check out more such articles and tutorials on https://weekendtutorial.com/