Estimated Length: 30min | Difficulty: Intermediate
In this lesson, we will be going over how to do a Madlib with a Wordbank using jQuery.
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.
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.
<li>Person's Name:<input type="text" id="person-name"></li>
<li>Place:<input type="text" id="place"></li>
Next, add a basic 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.
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.
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.
//Add click function to submit button
//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 +"."
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.