How to Make a Mad Lib in JavaScript

Creating a Mad Lib in JavaScript can be a fun way to practice working with user inputs and string manipulation. This guide will show you how to build a simple Mad Lib using JavaScript, covering various methods to collect user inputs and format the final story.

let noun = prompt("Enter a noun:");
let verb = prompt("Enter a verb:");
let adjective = prompt("Enter an adjective:");
let story = `Once upon a time, there was a ${adjective} ${noun} who loved to ${verb}.`;
console.log(story);

To create a Mad Lib in JavaScript, use prompt() to collect user inputs and template literals to format the story:

Mad Libs are interactive stories where certain words are replaced with user-provided inputs. This exercise helps in learning how to handle user inputs and manipulate strings in JavaScript.

Collecting User Inputs

To collect user inputs in JavaScript, you can use the prompt() function. This function displays a dialog box that prompts the user to enter data.

Example 1: Using prompt()

let noun = prompt("Enter a noun:");
let verb = prompt("Enter a verb:");
let adjective = prompt("Enter an adjective:");

Explanation:

• prompt("Enter a noun:"): Asks the user to enter a noun.
• prompt("Enter a verb:"): Asks the user to enter a verb.
• prompt("Enter an adjective:"): Asks the user to enter an adjective.

Formatting the Story

Once you have the user inputs, you can use template literals to insert these inputs into a predefined story.

Example 2: Using Template Literals

let story = `Once upon a time, there was a ${adjective} ${noun} who loved to ${verb}.`;
console.log(story);

Explanation:

• `Once upon a time, there was a ${adjective} ${noun} who loved to ${verb}.`: Uses template literals to create a string that includes the user inputs.

Putting It All Together

Combine the user input collection and story formatting to create a complete Mad Lib.

Example 3: Complete Mad Lib Example

let noun = prompt("Enter a noun:");
let verb = prompt("Enter a verb:");
let adjective = prompt("Enter an adjective:");
let story = `Once upon a time, there was a ${adjective} ${noun} who loved to ${verb}.`;
console.log(story);

Explanation:

• Collects inputs for a noun, verb, and adjective.
• Constructs a story using these inputs.
• Logs the final story to the console.

Enhancing the Mad Lib

You can enhance the Mad Lib by adding more inputs and creating a more complex story.

Example 4: Adding More Inputs

let noun = prompt("Enter a noun:");
let verb = prompt("Enter a verb:");
let adjective = prompt("Enter an adjective:");
let adverb = prompt("Enter an adverb:");
let place = prompt("Enter a place:");
let story = `Once upon a time, in ${place}, there was a ${adjective} ${noun} who loved to ${verb} ${adverb}.`;
console.log(story);

Explanation:

• Adds prompts for an adverb and a place.
• Incorporates these new inputs into a more detailed story.

Conclusion

Creating a Mad Lib in JavaScript is a great way to practice handling user inputs and manipulating strings. By using prompt() for input collection and template literals for string formatting, you can easily build interactive stories. Enhancing the Mad Lib with more inputs and a complex storyline can make the exercise more interesting and engaging, helping you to further develop your JavaScript skills.