June 5, 2019
How to Make a Random Quote Generator
Although today’s topic doesn’t have to do with literature, society, the Gothic, or writings tips, in some abstract way, it does. Although this post is a technical step-by-step guide on how to make a JavaScript random quote generator, it’s also yet another reminder that creativity (like knowledge) is a holistic process.
In other words, there aren’t “areas” of creativity, neatly isolated from one another. There isn’t a creativity related to fiction writing, another related to academic writing, and yet another related to developing Android apps. There is only one form of creativity, and the more efficiently you can combine its different facets, the better.
Chances are, if you found this post you care more about the JavaScript code, so I won’t tire you with theorizing – if you’re interested in philosophy, feel free to take a look at the many posts dealing with philosophical musings.
Having said that, this post still wants to make a more theoretical point, namely that what appears difficult and incomprehensible (like coding) can be very simple. Therefore, I will be a bit… verbose in my explanations, trying to help beginners keep up.
So, let’s get to the details of how to make a random quote generator written in JavaScript.
How to Make a Random Quote Generator: the Background
Followers of the blog (and if you aren’t one, take a look here) know that my programming revolves around writing and texts. I’ve made an iambic pentameter generator, a rhyming anapest poetry generator, and many Android apps – including, indeed, a random what-if generator.
As I’ve said in the past, a program is an answer to a need. In other words, you must first identify the need and only then proceed with coding it. This might sound self-obvious, but many people just start making something without properly realizing why. Creativity and motivation are all but absent in that case, and we don’t want that.
For me, the idea to make a random quote generator came when I thought it would be neat to have such a thing somewhere in the blog. It would be nice, I thought, for the visitor to see something quirky, mystical-sounding that is still related to books.
How to Make a Random Quote Generator: Implementation
The first step was to conceive the structure of the sentence. To do that, I simply came up with one myself. Say, “It seems some witty novels can inspire”.
I then analyzed the several parts of the sentence, to identify the elements I wanted to randomize:
- It seems
- some
- witty
- novels
- can
- inspire
To maintain full control over the possibilities, I decided to fully randomize only the adjective (here represented by “witty”), the modal verb (here represented by “can”), and the verb (“inspire”). Everything else needed to still be a random selection, but from a pool of options I supplied.
Creating Sets of Options
And so, I created an array for each set of possibilities.
(Note: the code presented is separate from other elements, for sake of clarity. The full code will be supplied at the end of the post)
To randomize the adjective and the modal verb, I used my favorite RiTa library.
Now, it was just a matter of putting it all together.
Combining All the Elements
This part will seem very easy for those with at least some rudimentary knowledge of HTML and JavaScript.
If you don’t have such knowledge, don’t feel taken aback. It’s so, so much easier than it seems. I’ll try to provide some commentary to help you going.
You can also scroll further down, to the part titled “The Full Code”, and copy & paste this code into a text editor (e.g. Notepad), then save the file as an .html file and open it on your browser. It’ll work right away and you can still experiment with the options. That is, you can edit the file on your text editor to understand how it works.
The HTML Outline
(Note: if you’re not an absolute beginner, feel free to skip these parts and go directly to the section “The Full Code”, further below; that’s what you came here for!)
We use HTML to create the skeleton of the page:
Inside the <body> of the page, we define a <p>aragraph element which we call “randomQ” (it could’ve been any name).
What you see inside the <head> of the page is the reference to two external scripts we’ll make use of. The second is the RiTa library I referred to earlier. The first is jquery, widely used for many JavaScript applications.
And then comes my own script, the random quote generator itself
The Random Quote Generator Script
The 2nd line simply initializes all the variables which we’ll use in the script. The 3rd line makes sure that the document (that is, the web page) will be fully loaded before executing the code.
Further below, after deploying the sets mentioned earlier, I use the RiTa.randomItem() function to pick a random word from my arrays. Subsequently, I use RiTa.randomWord() to pick a random adjective, modal verb, and verb, respectively. Line 13 simply combines all the elements into a sentence and displays it on the <p>aragraph we defined earlier (“randomQ”).
The Full Code
The entire code is offered here, for your convenience. Feel free to use it and adapt from it.
Knowledge: Combining Facets of Creativity
Maybe you know how to program; or maybe not. Maybe you know how to write successfully; or perhaps not so much. This, in itself, means little.
What’s important to keep in mind is that knowledge and creativity are holistic processes. Knowing how to code is not separate from knowing how to write. Understanding why music is liberating is not irrelevant to finding pleasure in cooking, knitting, or making furnishings.
As a smart lad once said, “To see a World in a Grain of Sand/ And a Heaven in a Wild Flower/ Hold Infinity in the palm of your hand/ And Eternity in an hour”
Looking for another quote generator, of the… “demotivational” kind? Take a look at this post!