Web Tutorial: Google Blog HTML/JavaScript Random Quotes Gadget (Part 1/2)

Howdy, folks.

Today, we're going to mess around with Google's blog gadgets. In particular, the HTML/JavaScript gadget.

Some of you may have noticed that every time you refresh this blog, the quote changes!

The HTML/JavaScript
gadget on this blog

It takes a certain amount of maneuvering, but ultimately it's nothing extremely fancy. Those of you with a Google blog may want to try this.

First, create a HTML/JavaScript gadget using the interface.

The gadget creation interface

Now, in the content, enter the following HTML tags.

<div id="txtQuote">

</div> 

The txtQuote div is meant to store the quote. Now, we're going to prepare the JavaScript, like so.

<div id="txtQuote">

</div>

<script>

</script>

This script uses arrays and randomizer functions, so if you're not familiar with either, go do some reading at the links below.

Arrays: (http://www.w3schools.com/js/js_arrays.asp)
Randomizer: (http://www.w3schools.com/jsref/jsref_random.asp)

First, we declare an array quotes.

<div id="txtQuote">

</div>

<script>
var quotes=new Array();
</script>

Then we populate the array.

<div id="txtQuote">

</div>

<script>
var quotes=new Array();
quotes[0]="\"In 1969 I gave up women and alcohol. It was the worst 20 minutes of my life.\" - George Best";
quotes[1]="\"Some people believe football is a matter of life and death. I am very disappointed with that attitude. I can assure you it is much, much more important than that.\" - Bill Shankly";
quotes[2]="\"They say 'go with the flow', but you know what else goes with the flow? Dead fish.\" - Roy Keane";
quotes[3]="\"Behind every kick of the ball there has to be a thought.\" - Dennis Bergkamp";
quotes[4]="\"Success is no accident. It is hard work, perseverance, learning, studying, sacrifice and most of all, love of what you are doing or learning to do.\" - Pele";   
</script>

Fill it up with whatever you like. I'm primarily using quotes from footballers. (Because I'm a football nut. Shut up.) So now, are we done? No, we've just finished filling up the depository which the script will use to populate the txtQuote div. Now we're going to write the code that randomly picks one of these quotes.

<script>
var quotes=new Array();
quotes[0]="\"In 1969 I gave up women and alcohol. It was the worst 20 minutes of my life.\" - George Best";
quotes[1]="\"Some people believe football is a matter of life and death. I am very disappointed with that attitude. I can assure you it is much, much more important than that.\" - Bill Shankly";
quotes[2]="\"They say 'go with the flow', but you know what else goes with the flow? Dead fish.\" - Roy Keane";
quotes[3]="\"Behind every kick of the ball there has to be a thought.\" - Dennis Bergkamp";
quotes[4]="\"Success is no accident. It is hard work, perseverance, learning, studying, sacrifice and most of all, love of what you are doing or learning to do.\" - Pele";

document.getElementById("txtQuote").innerHTML=quotes[Math.floor(Math.random() * (quotes.length-1))]; 
</script>

The code Math.floor(Math.random() * x) gets a random number from 0 to the number of items in the array quotes, minus 1. In this case, x is 4 (you have five quotes, yes, but programmers tend to count from zero!). So when you say Math.floor(Math.random() * (quotes.length-1)), you're referring to a random element within the quotes array.

document.getElementById("txtQuote").innerHTML= assigns the innerHTML value of txtQuotes to the randomly selected quote.

Save, and we're done. Refresh the page any number of times you'd like, and watch the quote change!

Next 

Changing the gadget title.