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 –
- A button when clicked generate the Quote
- 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/
Top comments (0)