Exercise Wednesday

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 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.)
var bunnyName = "Flopsy";

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

hippityHoppity();
alert(bunnyName);

What values do you expect at these alerts?

var bunnyName = "Flopsy";

function hippityHoppity() {
  var 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 video 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.