- Fork and clone this repo: week3.day1.userInput
- Do NOT alter the HTML or CSS and do not use an outside library.
- Using what you know about the DOM and JavaScript, modify the website in the following ways:
- WHILE typing in the
#title_inputfield, the#main_titleis updated- Hint: try key events
- When the user clicks on the
#submit_buttonButton:- If the user has any field left blank, send an
alert()informing the user to “Please fill in all fields” - If the user has all fields filled out:
- Parse the inputs into the following “Ad Lib” text, putting the corresponding inputs in the appropriate spots: “Last night I ate a {
#noun}, and today I just had to {#verb}. What a {#adjective} day!” - Hide the
.form_container - Populate
#story_resultwith the finalized text
- Parse the inputs into the following “Ad Lib” text, putting the corresponding inputs in the appropriate spots: “Last night I ate a {
- Tip: Remember to
.preventDefault()or else the button will attempt to submit the form, refreshing the page
- If the user has any field left blank, send an
- WHILE typing in the
- Customize the Ad Lib text and include additional input fields.
- Instead of making the
.form_containerdisappear suddenly, have it fade out slowly over .5 second- Note: you do not need to use an outside library to do this.
- Once you have it working...try using jQuery to accomplish the same thing!
- jQuery is a library that makes document traversal, manipulation, and event handling easier for developers. Ask your instructional team how to set this up properly!