Lesson Wednesday

Goal: Being able to gather information from users is an incredibly important functionality of any website. Further reinforce your knowledge of creating and retrieving information from web forms with HTML and JavaScript.

Warm Up

  • What is the difference between the jQuery methods.text() and .append()?
  • What is the difference between local and global variable scope? Where is a locally-scoped variable accessible? What about a globally-scoped one?
  • Discuss some errors you encountered in previous jQuery exercises with your partner. What was the issue? What ultimately resolved it?


Additional Form Practice

Revisiting the content from Practice: Forms, finish one of the exercises in this lesson you have not yet completed with your partner.

These include:

  • Follow along with the video here and make a Mad Libs of your own.
  • 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.
  • 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.
  • Create a website with a form on it to take the user's full name and address as if they were ordering a product from you. After they submit the form you should show them a receipt. Thank them for purchasing whatever it is you are selling, and be sure to use their full name. Then reprint their address as a confirmation of shipping details.
  • Create a website for booking appointments with you. The user should enter their name, the date they would like for their appointment, as well as the start and end times. Again, after they submit the form you should show them a confirmation page telling them that the booking was successful, and be sure to reprint all the information they entered into your form for confirmation.
  • Use a form to let the user fill out a survey. Ask them to fill in their name, their favorite foods, their favorite music, and any other information you feel like. Explore some of the other input types. You can read about them here. For example, you can have them pick a favorite color with <input id="color" name="color" class = "form-control" type="color">.