JavaScript Random Quote Generator

Posted by on Jan 18, 2016 in Honor Code, JavaScript, Tutorials

JavaScript Random Quote Generator banner image

JavaScript Random Quote Generator – Introduction

A few days ago, I wrote a blog post on creating a PHP Random Quote Generator. In this tutorial, I’ll show you how you can create a JavaScript random quote generator. The principals are very much the same.

Full Code

I’m going to show you the code before explaining it to you:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<html>
<head>
<title>
JavaScript Random Quote Generator
</title>
</head>
<body>
<code>
<script language="JavaScript">
var quoteGroups=7;
var quoteNum;
var theQuote=new Array();

    theQuote[0]='Some people call me the space cowboy';
    theQuote[1]='Some call me the Gangster of Love';
    theQuote[2]='I speak on the pompetance of love';
    theQuote[3]='Some people call me Maurice';
    theQuote[4]='You\'re the cutest thing that I ever did see.';
    theQuote[5]='I really love your peaches wanna shake your tree';
    theQuote[6]='Lovey dovey lovey dovey lovey dovey all the time';
    theQuote[7]='Oh baby I\'ll sure show you a good time';

var quoteNum = Math.round(Math.random() * quoteGroups);
document.write(theQuote[quoteNum]);
</script>
</body>
</html>

JavaScript Variables

Before we go any further, let’s talk about variables. Variables are used to store data. A list of names, a shopping list, your favorite songs or maybe even some quotes! Variable names (known as identifiers) can contain letters, digits, undserscores and dollar signs. Every JavaScript variable must be identified with a unique name. There are some general rules for variable names. Variable names can contain letters, digits, underscores and dollar signs. A variable can only begin with a letter or a dollar sign ($). There are some reserved keywords words in JavaScript that can’t be used. If you’re interested, you can see a list of JavaScript keywords over at W3Schools.com. Let’s move on and discuss what each of our variables is for.

JavaScript Random Quote Generator Variables

1
2
3
var quoteGroups=7;
var quoteNum;
var theQuote=new Array();

We use var quoteGroup=7; to tell JavaScript that we’re creating a variable with an array ranging from zero to 7. An array is a list of data stored within a variable. In this case, we’re storing a list of 8 quotes. quoteNum is used a little bit later. I’ll go back to that one when we’ve come to it. theQuote is to going to store each quote. Notice that each variable has a semi colon(;) after it? That tells JavaScript that the line of code has ended. They’re very important, so don’t forget them!

The Quotes

1
2
3
4
5
6
7
8
theQuote[0]='Some people call me the space cowboy';
theQuote[1]='Some call me the Gangster of Love';
theQuote[2]='I speak on the pompetance of love';
theQuote[3]='Some people call me Maurice';
theQuote[4]='You\'re the cutest thing that I ever did see.';
theQuote[5]='I really love your peaches wanna shake your tree';
theQuote[6]='Lovey dovey lovey dovey lovey dovey all the time';
theQuote[7]='Oh baby I\'ll sure show you a good time';

As mentioned, each quote has an array number attached to it. We store each of our quotes in quotations. To let JavaScript know that the line of code is done, we end it with a semicolon. I’m mentioning the semi colon again because they’re extremely important. Without them, JavaScript doesn’t know about the end our our array and will return an error message that reads “undefined”.

Escaping Characters

We’ve got some quotes that use an apostrophe. Because the apostrophe is being used for our quotations, we need to do something to let JavaScript know that our quote hasn’t ended yet. Here’s an example of one of those quotes:

1
theQuote[4]='You\'re the cutest thing that I ever did see.';

Notice that “\”? That’s an escape symbol. The escape symbol tells JavaScript that the apostrophe is part of the quote. We can also escape the escape symbol. For example, for “Plans / Events”, we would type it as “Plans //events”.

The Number Generator

We’ve come to the part where we tell JavaScript to pick a random number.

1
2
var quoteNum = Math.round(Math.random() * quoteGroups);
document.write(Quote[quoteNum]);

Remember that quoteNum variable that we didn’t discuss earlier? Let’s do so now.
We’re using it with a function: var quoteNum = Math.round(Math.random() * quoteGroups);.
A function is just a fancy word for a bit of code that’s designed to make something happen. This particular function is going to return a random number between zero and 7.

We can’t just stop there though. We don’t want our code to just pick a random quote and not tell us what it is. That’s just mean. That’s why we use the document.write  function. Using document.write(theQuote[quoteNum]) tells JavaScript to write down the quote and tell us what it is. That’s it! The script is done. Save your file with an extension ending with html (quotes.html) and open it with your favorite web browser. Did it work for you? Let me know! I hope you enjoyed this tutorial. If you have any questions, or if you encounter a problem with the script, leave a comment. Comments are always welcome since I’ve just restarted this blog and don’t have to many of them yet. It’s kinda lonely…

Read More »