Lisa Frank, anyone?).">

Alisen Hazzard

the Blog

JavaScript MadLibs Generator

Posted on August 22nd, 2014

Mad Libs was one of my favorite road trip games as a kid. (Growing up with a younger brother, our Mad Libs were filled with gross and vivid adjectives, lots of “butts” in the nouns category, and all kinds of words related to flatulence - who knew there were so many?!) Even though you can fill in the words before you read the story, I loved to fill them out in line with the text, so I could see how hilarious they were going to be before everyone else did. If you liked to see the fun ahead of time too, here is a beginner Javascript Mad Libs Generator that you can use to amuse your grown-up self. All you need to do is write a short story (or just a sentence), create some arrays, and randomly assign them in place of text. (Verbs relating to flatulence encouraged, though not included).

The HTML File

First, create an HTML file then open it in your browser. Bring up your developer console (Command/Option/J on a Mac, and Control/Shift/J on a PC) so you can see your code after you write the application. Normally, it’s better to create a Javascript file and link to it in an HTML file. For this project though, I only created an HTML file and included my Javascript code within script tags, to keep things simple.

Mad Libs Prompt

Also, to keep it short I used a single sentence for my output. “[Proper noun] and [proper noun] [verb] [adverb] over the [place].” For each option, we’ll make an array of words to choose from in order to make a random sentence. (You’ll see from the example that it would also be easy to write a longer story and choose from the same arrays if you wanted a longer Mad Lib.)

Create Arrays

For each type of word (noun, verb, etc.) create a variable containing an array of strings. These were the arrays I created:


  var nouns = ["Alisen", "Erik", "Brett", "Karissa"];
  var nouns2 = ["Penny", "Fiddlesticks", "Hrothgar", "Snowy"];
  var verbs = ["ran", "hopped", "galloped", "skittled"];
  var adverbs = ["quickly", "eagerly", "hesitantly", "slowly"];
  var places = ["bridge", "trail", "hill", "beach"];

(This is clearly a charming story about people and their pets, actively pursuing an outdoor adventure.) This should be the first thing inside of your script tags.

The Application


  var nouns = ["Alisen", "Erik", "Brett", "Karissa"];
  var nouns2 = ["Penny", "Fiddlesticks", "Hrothgar", "Snowy"];
  var verbs = ["ran", "hopped", "galloped", "skittled"];
  var adverbs = ["quickly", "eagerly", "hesitantly", "slowly"];
  var places = ["bridge", "trail", "hill", "beach"];
  
  function returnSentence(){
    var finalString = "";
  
    // Pick random elements from different arrays
    finalString = 
    nouns[Math.floor(Math.random() * nouns.length)] + " and " +
    nouns2[Math.floor(Math.random() * nouns2.length)] + " " +
    verbs[Math.floor(Math.random() * verbs.length)] + " " +
    adverbs[Math.floor(Math.random() * adverbs.length)] + 
    " over the " +
    places[Math.floor(Math.random() * places.length)] + ".";
  
    return finalString;
  }
  
  // Get string
  console.log( returnSentence() );

This function, returnSentence(), contains the variable finalString, which is an empty string where we will be writing our Mad Lib. Within finalString, we have the structure of our sentence, including each random member of the arrays added on to one another with a few lines of text.

This is the essential text that will go to each array and randomly choose a word:


  nouns[Math.floor(Math.random() * nouns.length)]

Math.random() will return a random value between 0 and 1 (not including 1), which we then multiply by the number of items in the array (in this example, nouns.length). Since we have 4 items in this array, we will get back a number up to, but not including 4. Math.floor() rounds the value down to the closest integer (eg. 3.9 becomes 3).

In this case, the largest integer possible is 3, since we can only ever reach the length of the array minus 1. How does this work? In the arrays, the position of each member starts with 0. In the nouns array, the positions would be: [Alisen=0, Erik=1, Brett=2, Karissa=3]. Therefore, the code will result in the position of one value of the array . If our code results in nouns[2], the resulting code would give us “Brett”, which is in the [2] position of the nouns array.

We repeat this code for each array, using "+" to join the values, and add additional words and spaces where needed. Then, we want to return finalString, which will give us the complete sentence with our random words.

Call the Function

Now that we have our function ready to return a random selection of words, we need to call it and print it to the console. Simply use console.log(returnSentence()); at the end of your code before you close the script tag. Go back into the dev tools in your browser and refresh the page. Each time it refreshes, the words change! Excitement abounds!

Next Steps

You can probably see other fun ways to add on to this application, like writing longer paragraphs and experimenting with using the same lists of words in different places. If you reuse these arrays in multiple places in your story, remember that it’s likely that words will repeat, since we didn’t include anything in the function to remove a word once we use it. (This is another cool thing you could add to your code for more road-trip worthy Mad Libs!)

I love simple Javascript projects - if you have any others send 'em my way. @alisenhazzard

View Application

Tagged in: JavaScript