Goal: Practice using jQuery elements with HTML forms:

• Use the HTML structure of a form
• Implement the submit() function
• Gather the input values from the form

Warm Up

---

• Why does variable scope matter?
• What happens when you don't use let or const (or var) to declare a variable? Why is that bad?
• There are two alerts that display the variable bunnyName, one when the function runs and one at the end of the code. What value do you expect at each alert? (Use JSFiddle to test your theories.)

let bunnyName = "Flopsy";

function hippityHoppity() {
  alert(bunnyName);
  bunnyName="Cottontail";
}

hippityHoppity();
alert(bunnyName);

What values do you expect at these alerts?

let bunnyName = "Flopsy";

function hippityHoppity() {
  let bunnyName = "Mopsy";
  alert(bunnyName);
  bunnyName="Cottontail";
}

hippityHoppity();
alert(bunnyName);

• Why do you need event.preventDefault() when working with jQuery forms?

Code

---

Mad Libs

Follow along with the lesson and make a Mad Libs of your own.

Form Letter

Make a form letter where the user inputs their name, and they get back a letter addressed to them. Feel free to use lorum ipsum for the text of the letter. Use Bootstrap and your knowledge of CSS to make the letter look like a letter or virtual postcard.

Shouting Machine

Create a page that asks the user to type something into a field, and when they submit the form, have the page say it back to them in all uppercase.