Skip to content

Instantly share code, notes, and snippets.

@stormsweeper
Forked from alexpelan/README.md
Last active February 4, 2018 17:02
Show Gist options
  • Save stormsweeper/83635faf9f9643358a800a7cc0492fa1 to your computer and use it in GitHub Desktop.
Save stormsweeper/83635faf9f9643358a800a7cc0492fa1 to your computer and use it in GitHub Desktop.
Exported from Popcode. Click to import: https://popcode.org/?gist=83635faf9f9643358a800a7cc0492fa1

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 adjective variable to the page where it says APPEND ADJECTIVE VARIABLE.
  2. Append the verb variable to the page where it says APPEND VERB VARIABLE.
  3. Test your code! Try entering a few words and hitting the button - does it work?

Finish early?

Add more fields and another sentence from the list of sentence starters.

<!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 ");
// APPEND NOUN VARIABLE HERE
$("#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