Make a Simple Quote Generator in JavaScript!

Subscribe to my newsletter and never miss my upcoming articles

An important message

Hello coders and creative people! First, I'd like to say a huge thank you to those who have read and reacted to my Easy-to-Build Portfolio Website post. My posts have never gotten that much likes before so thank you~ I hope to continue sharing valuable posts here.

courtney-hedger-t48eHCSCnds-unsplash.jpg Photo by Courtney Hedger on Unsplash

So after publishing that post, someone reached out to me to ask me how I made the quote generator on my website so here's the tutorial.

Capture.PNG My website's 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>

You can add in your favourite quote in the HTML as the first one people will see when they visit your quote generator.

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:

function newQuote(){
    var randomNumber = Math.floor(Math.random()*quotes.length);
    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!

Maria Kristina Salada's photo

I love quotes! 😍 Thank you very much

Victoria Lo's photo

Yayy! Thanks for reading :)

Jome Favourite's photo

Simply explained, thanks I understood everything 🙂

Victoria Lo's photo

Yayy thanks :)

Geoffrey Matieso's photo

Woow this is just amazing dev Vicky. Thanks for the encouragement. Infact I was trying to crack the nut out of where arrays could help me since am still learning them by now. I know. Once more thank you 😊

Victoria Lo's photo

Thanks! I'm glad this tutorial has helped you! Keep practicing and have fun!