Mad Libs Generator
Applying what you’ve learned about HTML, CSS, and JavaScript, then pushing yourself to do some problem-solving and research, you are going to build a Mad Libs Generator! If you aren’t familiar with “Mad Libs”, read up on it here.
Must-Haves
- A prompt for the user to provide a noun, verb and adjective
- A button for the user to submit their input
- A response on the screen, telling the user the “Mad Lib” that was generated using their inputs!
Tips
- One you get the inputs, you’ll need to use
string interpolationwith the user inputs and some of your words, as well. - It’s be great if every Mad Libs generated didn’t have the exact same sentence structure…🤔
Iteration 1 - Wireframe & Vision
- Draw out a wireframe, or a rough draft, of what you what the site to look like!
- Like we did with the Photo Gallery, label each section with the HTML element that will be used
- Get your assets together: Are you going to use any photos? You’ll need some sentence stems to interpolate the nouns, verbs, and adjectives with. Store links to images or any text you want to use in a GoogleDoc or as comments in a CodePen. Also, decide on your color palette. Color Supply is a great resource for this!
- Make sure your wireframe and assets are approved by your instructor before moving on
Iteration 2 - HTML & CSS
- Now that you have wireframes, write out the HTML & CSS to make this come to life
Iteration 3 - Functionality
- Write an event listener and handler for your button(s). Make sure they are working with a
console.log(). Make sure you are grabbing the values from all 3 inputs. - Using all 3 inputs and your sentence stems, show the Mad Lib to your user once they click the button!