Skip to main content
← JavaScript

Lesson 6 of 11

Mad Libs

Fill in a few words. The page puts them into a silly story.

What you will learn

  • Reading several inputs
  • Template literals
  • Building a string
  • .trim()
  • Early return

Before you start

Quote Typer. There you compared text. Here you read several boxes and build new text from them.

What this page does

  1. Fill in every box: an adjective, an animal, a verb, a place, and a number.
  2. Click the button. Your story appears below.
  3. Leave a box empty and click again. The page reminds you to fill them all in.

How it works

  • makeStory() reads each box with .value. That is the text the user typed.
  • It checks that no box is empty. .trim() removes spaces from the ends of the text. A box with only spaces still counts as empty.
  • If a box is empty, the function shows a reminder. Then it uses return to stop early. Nothing after the return runs.
  • It builds the sentence with a template literal. That is a string written in backticks. Inside the backticks, ${animal} becomes the word the user typed.
  • It shows the result by setting storyParagraph.textContent.

Style your story

Two lines in index.css. Try a big story on a bright page.

1.2rem
#f4f6f9

Build it step by step

Get one word onto the page first. Then build the sentence. Add the check last.

  1. Make the page

    Make index.html with a few labelled <input> boxes. Give each box an id. Add a button and an empty <p id="story">. Put the <script> tag at the end.

  2. Read one box

    Write makeStory(). Read one box with .value. Put that text straight into #story. Connect the button with addEventListener("click", makeStory). Click it. Your word appears.

  3. Build the sentence

    Read the other boxes. Join them into a sentence with a template literal. Reload and try it. You get a full silly story.

    storyParagraph.textContent =
    `One day, a ${adjective} ${animal} decided to ${verb} ` +
    `all the way to ${place}. It took ${number} minutes.`;

  4. Add the empty-box check

    Add an if that uses .trim() to find empty boxes. Show a reminder and return early. Test it by leaving one box blank.

Try these changes

Make these changes in the files beside this guide. Each one only uses what this lesson has already covered. Tick each one when it works.

Check yourself

Three quick questions on this lesson. Get them all right to finish the lesson and earn a pack.

Loading your answers

Teacher's versionHow to run this lesson, what to check, and any answers. Students do not need this.

How to teach it

  • Let the student choose the story. A story they wrote teaches more than three stories you wrote.
  • Build the string with + first if template literals confuse them. Then rewrite it with backticks next to the first version. Seeing both makes the backtick version clear.
  • Add the empty-box check last, on purpose. The student should first see the broken output with a missing word. Then the check has a reason to exist.