HOME LEVEL 1 LEVEL 3

JavaScript Exercise: Mad Libs

The goal of this exercise is to make a Mad Libs generator.

The second half of these slides may be useful.

  1. Start with this webpage, which has several input elements and a button:
  2.       <!DOCTYPE html>
          <html>
          <head>
            <meta charset="utf-8" />
            <title></title>
          </head>
          <body>
            <h1>Mad Libs</h1>
            <ul>
              <li>Noun: <input type="text" id="noun">
              <li>Adjective: <input type="text" id="adjective">
              <li>Someone's Name: <input type="text" id="name">
            </ul>
            <button id="lib-button">Lib it!</button>
            <div id="story"></div>
          </body>
          </html>
        
  3. Add a script tag to the bottom of the page for your code.
  4. Add an event listener to the button so that it calls a makeMadLib function when clicked.
  5. In the makeMadLib function, retrieve the current values of the form input elements, make a story from them, and output that in the story div (like "Pamela really likes pink cucumbers.")