Follow

Follow
Make a Simple Quote Generator in JavaScript!

Make a Simple Quote Generator in JavaScript!

Victoria Lo's photo
Victoria Lo
ยทMay 29, 2020
Play this article

Hello everyone! My previous article, Easy-to-Build Portfolio Website, someone reached out to me to ask me how I made a quote generator so here's the tutorial.

Capture.PNG

Example of a quote generator

Step 1: Quotes

To make a quote generator, the first ingredient is quotes! Start by creating a file called quotes.js and in it, an array called quotes to store your quotes.

If you are like me and love to collect quotes then this is the time for you to start digging out the quotes you have collected. If you don't collect quotes and not sure where to start, I have a bunch here for you:

var quotes = [
    '\"Life isn\'t about finding yourself, it is about creating yourself.\"\n\n-George Bernard Shaw',
    '\"If you are going down the right path and you are willing to keep walking, eventually you\'ll make progress.\"\n-Barrack Obama',
    '\"I have far more respect for the person with a single idea who gets there than one with a thousand ideas and does nothing.\"\n-Thomas Edison',
    '\"What is necessary to change a person is to change awareness of himself.\"\n\n-Anonymous',
    '\"Many people die at the age of 25, but their bodies are not buried until 75.\"\n\n-Benjamin Franklin',
    '\"If you don\'t get up every morning with a burning desire to do things, you don\'t have enough goals.\"\n-Lou Holtz',
    '\"The way to learning is to get rid of the arrogance of knowledge.\"\n-Confucius',
    '\"One can have no smaller or greater master than the mastery of oneself.\"\n-Leonardo Da Vinci',
    '\"Empty pockets never held anyone back. Only empty heads and hearts can do that.\"\n-Norman Vincent Peale',
    '\"Great things are not done by impulse, but a series of small things brought together.\"\n-Vincent Van Gogh',
    '\"Why measure your success by the suggestions of society when you can become a success on your own terms.\"\n-Robin Sharma',
    '\"A man may imagine things that are false, but he can only undetsand things that are true.\"\n-Isaac Newton',
    '\"Our fatigue is often caused not by work, but by worry, frustration and resentment.\"\n-Dale Carnegie',
    '\"True freedom is impossible without a mind made free by discipline.\"\n-Mortimer Adler',
    '\"Focus is not saying yes to all important things, rather it is saying no to less important things.\"\n-Steve Jobs',
    '\"Discipline is the bridge between goals and accomplishment.\"\n-Jim Rohn',
    '\"Success in life comes when you simply refuse to give up, with goals so strong that obstacles, failure and loss only act as motivation.\"\n-Jim Rohn',
    '\"Be yourself. Everyone else is already taken.\"\n-Oscar Wilde',
    '\"Be who you are and say what you feel, because those who mind don\'t matter and those who matter don\'t mind.\"\n-Bernard M. Baruch',
    '\"Imperfection is beauty, madness is genius and it\'s better to be absolutely ridiculous than absolutely boring.\"\n-Marilyn Monroe',
    '\"When you are content to be simply yourself and don\'t compare or compete, everyone will respect you.\"\n-Lao Tzu',
    '\"If you are always trying to be ordinary, you will never know how extraordinary you can be.\"\n-Michelangelo',
    '\"Leadership is solving problems. The day people stop bringing you their problems is the day you have stopped leading them.\"\n-Colin Powell',
    '\"Start by doing what\'s necessary; then do what\'s possible and suddenly you are doing the impossible.\"\n-Francis of Assisi',
    '\"It is our choices that show what we truly are, far more than our abilities.\"\n-Albus Dumbledore',
    '\"It does not do to dwell on dreams and forget to live.\"\n-Mirror of Erised'
]

Step 2: HTML Set up

Let's create an area for the quote to show up and a button to click on to generate the next quote.

A simple HTML would look like:

<blockquote>
<i id = "quotes">"I have far more respect for the person with a single idea who gets there than one with a thousand ideas and does nothing." -Thomas Edison</i>
</blockquote>
<a onclick="newQuote()">Next quote</a>

Step 3: newQuote()

So we want to generate a random quote everytime the user clicks on a button called Next Quote. Let's create the function newQuote() under our quote array to do just that.

First, we should generate a random index number ranging from 0 to the last index of the quote array.

Note: The last index of an array is array_name.length - 1

JavaScript has useful built-in functions: Math.floor() and Math.random() . To find a random number between a min and a max, the general formula goes like this:

Math.floor(Math.random() * (max - min + 1)) + min;

Note that the max value is exclusive while the min is inclusive in the range. Since we are replacing min with 0 and max with quotes.length the random index number will look like:

var randomNumber = Math.floor(Math.random()*quotes.length);

Now that we have a random index number generated, we would have to show it in between the HTML element tags. So let's select the element we want by: document.getElementById('quotes').innerHTML = quotes[randomNumber]; The id of the element I'm trying to output the quote in is called quotes and I want to replace its innerHTML with a new quote picked from the random index number.

The newQuote() function should look like:

document.getElementById('quotes').innerHTML = quotes[randomNumber];

And That's it!

Congratulations! You made your own quote generator. Now you'll collect more wisdom and perspectives from other great people! You can even include your own quotes or inspiring words from family or friends to make it more personal. I hope this tutorial has been helpful. If it is, please like and share it with people who you think needs it. Thanks for reading. Cheers!

Did you find this article valuable?

Support Victoria Lo by becoming a sponsor. Any amount is appreciated!

See recent sponsors |ย Learn more about Hashnode Sponsors
ย 
Share this