This is a little game like Mad Libs, which you may have played as a kid. When you open the index.html page, you'll see a random picture from thispersondoesnotexist.com, a form with a bunch of inputs, a big button, and a biography with a bunch of placeholder words in bold. You're going to finish wiring this up with JavaScript! When you're done, the player will be able to fill out the form, click the button, and see the bio with the words they entered + a random name.
This assignment will test your ability to:
- read from the DOM
- manipulate DOM elements
- write to the DOM
- work with arrays
Most of the work will be done in the index.js
file, though there will also be one tweak to the index.html
file.
Refer to the two codepens from class as needed:
- fork this repo
- clone your fork to your local development environment
Get the values the user entered in the input
elements and use them to update the output span
elements in the generateBio
function. This function is already set up to get called when the button is clicked (via the form's onsubmit
event).
Hints:
- Finish the
getRandomName
function:names
is an array with one entry. Return the value of that single entry to complete this function. - Finish the
setName
function: use therandomName
that was generated to insert the name in theh2
with id#name
Hints:
- review the arrays lesson
- element.insertAdjacentHTML
- Make all the input fields required so the user can't submit the form without filling it out.
- When the user clicks the button, the input fields should go away and the bio should show. The bio shouldn't be visible when the page first loads.
Hints:
- In the HTML, add the
hide
class to the#bio
div. This will hide that div by default. - In the JS, at the end of the
generateBio
function, add thehide
class to the#words
form, and remove thehide
class from the#bio
div. - element.classList
- Deploy your site via surge.sh
- In Google Classroom, submit a Google Doc with a link to your site and a link to your repo
Note: you do not need to do a pull request against this repo for this project.
Using separate ids for each input
and output span
(e.g. word-01
, output-word-01
) is very explicit and understandable, but it also feels a bit verbose. We could use arrays instead to simplify things, because the order of the inputs is the same as the order of the outputs:
- use document.querySelectorAll to get an array of all of the inputs, and another array of all of the outputs (hint: use the class name instead of the id)
- use a for loop to assign the values from the inputs to the outputs
- remove all the ids that you don't need anymore from the HTML
- profit 💸