Skip to content

Instantly share code, notes, and snippets.

@alexpelan
Created January 7, 2018 21:49
Show Gist options
  • Select an option

  • Save alexpelan/4b01f2c51fdd8a7cbd3bc88219e89fcb to your computer and use it in GitHub Desktop.

Select an option

Save alexpelan/4b01f2c51fdd8a7cbd3bc88219e89fcb to your computer and use it in GitHub Desktop.
Exported from Popcode.

Make Your Own Madlib!

Get the value of the inputs and append them to the page to create your own madlib!

Create Your Variables, & Get the Input Values

  1. Create adjective and verb variables (we've already created noun for you).
  2. Get the value of the adjective input, and store it in the adjective variable.
  3. Get the value of the verb input, and store it in the verb variable.

Append your variables to the page

  1. Append the noun variable to the page where it says APPEND NOUN VARIABLE.
  2. Append the adjective variable to the page where it says APPEND ADJECTIVE VARIABLE.
  3. Append the verb variable to the page where it says APPEND VERB VARIABLE.
  4. Test your code! Try entering a few words and hitting the button - does it work?

Finish early?

Add one more input field and a second sentence to the madlib!

<!DOCTYPE html>
<html>
<head>
<title>Make A MadLib</title>
</head>
<body>
<p> Noun (singular): <input id="noun">
</p>
<p> Verb (past tense): <input id="verb">
</p>
<p> Adjective: <input id="adjective">
</p>
<button> MadLib Me!</button>
<div id="message"></div>
</body>
</html>
{"enabledLibraries":["jquery"],"hiddenUIComponents":["console","editor.css"]}
$("button").click(function(){
// CREATE YOUR VARIABLES, AND GET THE INPUT VALUES HERE
var noun;
var noun = $("#noun").val();
$("#message").text("Yesterday, I saw a ");
$("#message").append(noun);
$("#message").append(" at school, it ");
// APPEND VERB VARIABLE HERE
$("#message").append(" suddenly, and I've never felt more ");
// APPEND ADJECTIVE VARIABLE HERE
$("#message").append(".");
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment