Mad Libs

Example

Basic Features

Step 1: From the Cloud9 dashboard: Create a new workspace
Fill in the following text boxes on the form:
→ Workspace name: mad-libs Copy
→ Clone from Git or Mercurial URL: https://github.com/studentmrcode/mad-libs.git Copy
Click Create workspace button
Open index.html and click Run

Step 2: Make separate variables for the text box, button, and paragraph.
Hint: If you're having trouble, rewatch the getting element video. The video shows an example. Do NOT copy it exactly.

Step 3: Add an event listener to the button to show the story.
Hint: If you're having trouble, rewatch the event videos. The videos show an example. Do NOT copy them exactly.

Step 4: Show a story when the button is clicked. For now, put _____ for the blanks in your story.
Hint: If you're having trouble, rewatch the output video. The video shows an example. Do NOT copy it exactly.

Step 5: Replace the first _____ with what the user typed in the text box.
Hint: Use the value property to get what the user typed in the text box. Original:
yourParagraphVariable.innerHTML = "The _____ jumped over the fence.";
Modified:
yourParagraphVariable.innerHTML = "The " + yourTextBoxVariable.value + " jumped over the fence.";

Step 6: Make two more text boxes for the user to type words, and modify the story to include those words. Do NOT make more buttons.

Debugging help

Last topic Next topic