Lesson 103: Madlibs with a Wordbank

Estimated Length: 30min | Difficulty: Intermediate

In this lesson, we will be going over how to do a Madlib with a Wordbank using jQuery.

Example:



Madlibs Code

The Madlibs example above is very lengthy and more advanced. To help you better understand the main code needed to complete the lesson, we will be going over the code of a much simpler madlibs game.

HTML

For the HTML code, first let's start with a simple unordered list with an input option. This is where the user will place their own words (nouns, adjectives, verbs, etc) into the madlib story.

<ul>

<li>Person's Name:<input type="text" id="person-name"></li>

<li>Place:<input type="text" id="place"></li>

</ul>

Next, add a basic submit button.

<!--Submit-->

<button id="submit">Submit</button>

Now, we create a div to hold the "story" part of the madlib that will show up once the user completes the form.

<div id="story"></div>

That's it!

CSS

There is no CSS needed to complete this lesson.

However, feel free to add your own styles to the input, submit button, or other elements so it better fits into your website.

jQuery

The jQuery in this lesson is used to hide the madlib story until the user fills out the form and selects the submit button. Once the form is submitted, jQuery will also help place those words the user submitted into the story.

<script>

$(document).ready(function(){

//Add click function to submit button

$('#submit').click(function(){

//Create a Variable and Get Element of #person-name

var personname = document.getElementById("person-name").value;

//Create a Variable and Get Element of #place

var place = document.getElementById("place").value;

story.innerHTML = "My name is " + personname + " and I like to go to the " + place +"."

});

});

</script>

As you can see on the last line of the code, the actual madlibs story is held in the jQuery code, not in the HTML. After creating variables for each input of the form, we place those variables into the story inside + signs. This is so the jQuery knows where to place these words after the form has been submitted.

See it all together

See the Pen Madlib by Rachel Hutchings (@imracheljoy) on CodePen.