Skip to content

Instantly share code, notes, and snippets.

@alexpelan

alexpelan/README.md

Last active January 7, 2018 21:48
Show Gist options
  • Save alexpelan/ece78d0dd4b16a6fdf4e14d4a9dacfae to your computer and use it in GitHub Desktop.
Save alexpelan/ece78d0dd4b16a6fdf4e14d4a9dacfae to your computer and use it in GitHub Desktop.
Download ZIP
Exported from Popcode. Click to import: https://popcode.org/?gist=ece78d0dd4b16a6fdf4e14d4a9dacfae
Raw
README.md

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!

Raw
index.html
<!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>
Raw
popcode.json
{"enabledLibraries":["jquery"],"hiddenUIComponents":["console","editor.css"]}
Raw
script.js
$("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