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 »

PHP Random Quote Generator

Posted by on Jan 15, 2016 in Honor Code, PHP, Tutorials

Php Random quote generator

PHP Random Quote Generator – Introduction

Today we’re going to create a PHP random quote generator. The generator will display a new bit of text each time the page is loaded or refreshed. For this tutorial I’m assuming that you already know that you have to use a server to run php. This can be done on a web hosting platform or with software that runs on your computer like xampp. (Update: If you’re interested in creating a random quote generator that runs client side – directly in the browser as opposed to server side I’ve written a JavaScript Random Quote Generator tutorial as well

How it Works

Let’s say you have a few famous quotes or testimonials from clients that you’d like to put on your website. One way you could display them is to put them on an entire page. Another way is to have a new quote displayed each time you refresh the page. We’re going to do this using two separate pages. We’ll start by typing out (or copying and pasting if that’s you’re thing) all of the different quotes that we want to display on the page. I’ll take you through each step and tell you exactly what each piece of code is doing. Next, we will create the page that the random quotes are going to appear on. Again, I’ll tell you what that code is doing. After all, what’s the point of the tutorial if you don’t understand how the PHP random quote generator works? I’m not going to bother making them look pretty. I’ll leave that for another tutorial.

The quotations page

Here’s the whole thing for those of you who are looking for a quick copy and paste solution. I would suggest sticking around and reading the explanation, however. That way you’ll have less chance of something going wrong with the execution. That and we still have anther page of code to work with. Using your text editor, create a new page and call it “quotes.php”.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php
 
 $num = Rand (0,2) ;
 
 switch ($num)
 {
 case 0:
 echo '<p>Hello darkness my old friend...</p>';

 break;
 
echo '<p>This line of text was inserted by a pho random quote generator!</p>';

case 1:
 echo 'If you ever get annoyed look at me I'm self employed - I love to work at nothing all day!';

break;

 case 2:
 echo 'Every inch of you is perfect from the bottom to the top';
 break;
 }
 ?>

What’s all that mean anyway?

I’m glad you asked Mr. Heading. Sorry. I only have the bad jokes. Let’s take it from the top.

1
2
3
<?php

$num = random (0,2)

Starting the code

We start by letting the computer know that we are now going to be using PHP. We do that by using the opening PHP tag.

Variables

Next, we declare a variable. You can think of a variable as a place to store things. Kind of like a closet or a locker. A variable has to start with a letter or the underscore character “_”. Variables are case-sensitive so if we were to use $Num, $nUm, $nuM or $NUM later on it wouldn’t mean the same thing. It would also get very confusing. Especially if you decided to use all four of those at the same time Yikes! Save yourself a headache. Don’t do it. a variable also starts with the “$” sign. The dollar sign tells PHP that you’re creating a variable so it’s kind of important. Really important actually.Also important is that semi colon. The semi colon tells PHP that you’re done that particular statement. Otherwise it would keep going on and on and on like an energizer bunny. I just dated myself, didn’t I? With $num, we’re creating a place to store random numbers between 0 and 2. “$num = random (0, 2) ;. Confused about the numbering? I’ll explain.

The PHP Numbering system.

In PHP, the numbering system starts with 0. “$num = random (0,2)” is just telling PHP that we want it to pick a number between 0 and 2 (0 or 1 or 2). That gives us place numbers for 3 different quotes. You can add more if you want, you just need to make the 2 into a 3 or a 4 or a 5 or a 6…really the number of quotes you want to use depends on how long you want to sit at your computer typing them all out. I have a short attention span. 3 is good for me.

The Switch Statements

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
switch ($num)
 {
 case 0:
 echo '<p>Hello darkness my old friend...</p>';

 break;

case 1:
 echo 'If you ever get annoyed look at me I'm self employed - I love to work at nothing all day!';

break;

 case 2:
 echo 'Every inch of you is perfect from the bottom to the top';
 break;
}
?>

This is how it works: First we have a single expression “$num = random (0-4). The value of the expression is then compared with the values (or numbers / quotes) for each case in the structure. If there is a match, the bit of code associated with that case is executed. We Use “break” so that the the code doesn’t just keep going onto the next case. You can think of it as either a person rolling a 3 sided dice or a person flicking a random light switch. See what I did there? Depending on which number (or switch) is picked, our php random quote generator will spit that particular one out. We use the curly bracket to let PHP know that the switches are the group that it can choose from. Finally we close our program with the closing PHP tag.

The Second Page – Easier than the first!

In order for our code to work, we need a page for the quotes to show up on. In your text editor, go ahead and create a page called “quotePage.php”. Type the following code into the page:

1
<?php include 'quotes.php'; ?>

If you want to, you can open this in your browser. You’ll see that one of the quotes appears on your page. Refresh the page. Another random quote should appear. If you get the same one, keep refreshing until it changes. There are only 3 after all. Unless you created more.

Questions or Comments?

Didn’t quite understand this tutorial? Have a comment on how the code could be made better? Have you used this code on your website? Let me know. I’d love to see how you’ve used it. Talk to me here or over on Twitter. I’m always around doing all things webby.

Read More »