Lab Homework 8

Mad Props

We can use reactive programming to make a madlib

Introduction

In this homework, you’ll put your knowledge of props and state together to create your very own story generator in the form of a Mad Libs.

Mad Libs is a phrasal template word game where one player prompts others for a list of words to substitute for blanks in a story, before reading the — often comical or nonsensical — story aloud. The game is frequently played as a party game or as a pastime.

In the past, you’d go out to a bookstore and buy a book of these, then fill them in. By making a digital version, you’ll not only have full control story framework, but you’ll also be helping save trees :)

Instructions

Based on the work we did in the lab (see #lab-8 for source), your task is to make a mad libs generator that accepts at least 4 player inputs, and generates a story below once the player clicks on a button. You can be as creative as you’d like.

Here are a few hints on how to prompt the player to enter the correct word type:

• Think about how to use state to hold the words the player enters
• You’ll want to tell the player what type of word to enter in the input field, for that, you can use the placeholder attribute e.g.,<input type=”text” placeholder='noun'/>
• There are 1,000s of ways to show the resulting story, one common way is to use your state to store a boolean, then flip it when a button is pressed, then lastly use a ternary operator to show a <div> tag with content.

class App extends React.Component {
     state = { showing: true };
     render() {
        const { showing } = this.state;
        return (
           <div>
                <button onClick={() => this.setState({ showing: !showing })}>Show my story</button>
                { showing ? <div>Here is your story!</div> : null}
            </div>  
        )
    }
}