by Sophanarith Sok
In this project, we’ll build a random quote generator that displays a random quote to the user every time they press a button. To get started, you’ll need three essential things that are almost always used for every web project:
- a web browser
- a text editor
- a desire to build things
For this tutorial I will be using the Google Chrome web browser, the Sublime Text 3 Editor, and of course, my own desire to build and teach. You can use whatever tools you feel comfortable with.
Let’s get started!
The first thing we’ll do is create the folder that will contain all of our files that make up the project. Create an empty folder on your desktop and name it “quote generator”. Open up Sublime Text and drag the file into sublime. Now we should have the folder accessible through the sidebar.
Now that we have all of our files setup, let’s create our HTML file that will work as the foundation for our web project. We’ll start off with a bare bones HTML code within our index.html file before we can add anything.
Below is our HTML file with nothing in it. You can think of this as our HTML skeleton that will hold all the meat (content), which we will add later.
Breaking it down
If you’re confused as to how each part of the HTML code serves its purpose, then I will explain it to you here. If you know exactly what each element does and why it’s there, then you may skip to the next section to continue.
First, we added “Quote Gen” between the <title> tags. The title tag takes the text between it and displays it on the tab of your web browser when it is opened.
Secondly, we created an <h1> element with “Simple Quote Generator” within it. This will serve to display a title within our web page.
After that, we create a <button> element with an onclick attribute with “newQuote()” passed in as a parameter. The <button> element as you guessed, is a button that will do something when you click on it. The onclickattribute is used to set a function to the button, so that every time you click on the button, it will run the function that was passed into the <button>’s onclick attribute.
In this case, every time you click on the button, it will run the function newQuote(), of course, we haven’t defined the newQuote() function yet. If you open up the project within a browser and press the button it will throw an error within the console since the function does not currently exist.
Finally, here is a refresher to show what our full index.html file currently looks like and what it produces in the web browser. To open the project, use a web browser to open the index.html file.
Thinking logically using code
Now, before we begin coding, let’s think logically about how we can create a quote generating machine with code. We can’t just start coding without thinking first.
We need to figure out what we want, and when we want it. For this project, we want quotes! When do we want it? We want it now! Oh, erm… I mean we want it whenever the user presses the button.
Now that we solved the first question, we need to ask the second. What are quotes? I mean really, what are they?
Thanks Jaden! Yes! Quotes are made up of letters, which make up words. In the programming world, words are classified as strings, therefore, our quotes will need to be strings!
Since we know that we will have multiple quotes, and each one will be picked out randomly, the best choice would be to store multiple strings within an array.
If you didn’t already know, elements within an array are retrieved by calling its array index number. The technical details are out of this tutorial’s scope, but in simple terms, each element within an array is represented by a whole number in chronological order. The first element of an array has an index number of 0, every element after that goes up by one.
In order to retrieve a random quote from an array, we now know that we need to produce a random number every time the user clicks on the button. Then, we would use that random number to retrieve a quote from the array and place that quote onto the HTML document, which in turn, would display the quote on the browser to the user.
That’s it! We solved how to create a Random Quote Generator by logically thinking in code! Here’s a summary of the logic that we’ve come up with for our project:
- Quotes are multiple strings that need to be stored in an array.
- Every time the button gets pressed, a random whole number needs to be generated.
- The number will be used as a representation of the array index number for the quote array.
- Once we retrieve the randomly picked quote from the array using our randomly generated whole number, we will place it to the HTML document.
Wow! We’ve gotten this far and haven’t started programming yet! Welcome to the world of programming!
You’re going to spend a lot of time coding in this career (or hobby). But my point is that you’re going to spend even more of that time thinking about programming logic and how to solve problems. Programming is not about hacking 100 words per minute for 20 minutes on the keyboard. That’s not going to happen.
We need to either create our own quotes or copy them from an online source.
As you can see on the picture below, I have defined a variable called “quotes” and set it equal to an array full of the quotes that I’ve chosen off the internet.
Now we need to create our newQuote() function that I mentioned earlier in the HTML section of this tutorial. For our newQuote() function, we need to generate a random whole number that ranges from 0 to the length of our quotes array. I will explain further below.
First, we call the Math.floor() function. The Math.floor() function takes in a parameter and rounds the number downward to the nearest integer. For example, if we call Math.floor(5.7) it will return 5.
Second, we will pass in Math.random() as a parameter into Math.floor(). The Math.random() function will generate a random decimal number between 0 and 1.
So let’s say we have this:
If we console log our randomNumber at this state, it will always return 0. This is because Math.random() will always be a decimal between 0 and 1 such as 0.4, 0.721, 0.98, and so on. Because we pass Math.random() into Math.floor() as a parameter, Math.floor() is always rounding down to the nearest decimal, therefore, every decimal between 0 and 1 will always revert back to 0.
So what’s the point of doing this? Well, to create our array index numbers, we need whole numbers, but we need random whole numbers. To generate random whole numbers and break away from only returning 0, we will need to take our random decimal and multiply it by a whole number.
Now let’s try something like this:
If we console log randomNumber, the results will be anywhere between 1 and 19. Now I could use this current state of randomNumber to pull out a quote from the quotes array, but it will only work if the array index number exist within the array, otherwise, an error will be thrown.
I currently only have 10 strings within my quotes array, so any number above 9 will return undefined since it does not exist within the array.
To solve this problem, we need to only multiply Math.random() with the length of our quotes array. By doing this, we can add or remove as many strings from the array as we like and our randomNumber variable will always return a valid number since we are using the quotes.length method to always get the current length of our array.
Now we need a way to use the value of randomNumber to randomly retrieve a quote from the quotes array and place the quote into our HTML document and display it to our users.
Now we will use the .innerHTML method to pass a randomly retrieved quote from our array as the value that will be added into our HTML quoteDisplay element.
We set innerHTML equal to our quotes array with our randomNumber variable passed as an array index number. Now our newQuote() function is complete!
If you’ve reached this part of the tutorial, you’ve completed the project! Congratulations! You are practically done building the Random Quote Generator.
Now all you need to do is open the project up in your browser and see if it works! Do this by dragging your index.html file into your browser window.
Press the button, and it should display a random quote to your screen. Press the button as many times as you like. Each time, a new quote should replace current one on screen.
You can add as many quotes as you want into the quotes array.
Take a look at an overview of our entire project files side by side that make up this Random Quote Generator.
You’ve created a fully functional Random Quote Generator and you’re probably wondering where do you go on from here.
You’re probably thinking that this Random Quote Generator looks very boring, and no one would probably use it. And you’re absolutely right. This project looks quite plain, and it’s up to you to change that.
You can improve upon this project by adding your own functionalities and styling to it.
At the beginning of this tutorial we created a style.css file that we didn’t use. CSS is used to make web pages pretty and colorful. It is up to you to add to the CSS file for styling if you want.
You can search for some CSS tutorials for some additional guidance. Let your imagination run wild, and make this project yours! Do whatever you want! Coding is magic and you’re a wizard, Harry!
If you enjoyed this tutorial please click the heart button and share it! Feel free to leave any comments, questions, or feedback. Thank you and happy coding!