Project: Mad Libs

Mad Libs is a word game in which the player is asked to fill in the blanks of a story without knowing the story or where the words they enter will end up in the story. The HTML and CSS for this project are provided in the GitHub Repository: https://github.com/rebeccapeltz/js-event-handling/tree/main. You can add your code there if you've already imported this into a Replit project for the Dynamic Style Change project. Otherwise, import the GitHub project.

In addition to HTML and CSS, the JavaScript file contains the story template, an interpolated string. It is commented out. The story template references variables that need to be retrieved from the form.

  • The click of the Get Story button will trigger a click event handler.

  • The event handler should extract all the data from the form and reference it with variables in the story template.

  • Once all the variables are loaded, retrieve the story using the User's input.

  • Display the story on the page in the paragraph with ID set to "story".

  • Alert the user if they don't enter data in all fields.

  • (Optional) Insert four of the underline characters (____) for missing words.

Last updated