Goal: Explore using jQuery to gather a variety of form input types by completing the exercises listed below.

Warm Up

---

• How do we gather form input from a select (ie: dropdown) box? How does this differ from a basic input (ie: text) field?
• What does :checked refer to when gathering input from radio buttons?
• If we includetype="number" in an HTML form field, do we still need to use .parseInt() when retrieving the value (assuming we need a number)?

Code

---

Meet the goal by completing one of the practice prompts below.

Survey

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. Include all form input types we've covered so far (except checkboxes; we'll learn more about those in the next course section!)

Online Marketplace

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.

Add CSS to your online store to make it look more professional, or inviting. Or add a stylistic theme that matches whatever your store is selling.

Collect additional information from the user in your form. For instance, if your online marketplace sells jewelry, include form fields denoting whether they're ordering a bracelet, necklace, or earrings. Then, make sure to include this extra information in the receipt you display back to the user.

Address Book

Create an Address Book application that allows a user to add new contacts by filling out a form. List all contact names on the homepage. Users should be able to click a name to view the contact's details (such as their address, phone number, email address, and more).

Further jQuery Exploration

At the end of the Calculator: User Interface lesson, we recommended you check out the jQuery documentation, especially the sections on Effects, Mouse Events, Form Events, Manipulation, and Traversing.

If you've completed all projects today and feel confident in the concepts they've covered, begin exploring these areas of the jQuery documentation. Experiment using methods listed in these sections throughout the projects you've created today.

For instance, you could add sliding transitions to objects as you hide/show them, alter CSS styles applied to an element when the user's mouse is hovering over it, attempt to empty areas of the DOM dynamically (perhaps your Address book could include a button to remove a contact?), and much, much more.

Peer Code Review

---

• Is the user interface logic and business logic separated? Is there anything you can spot that is in an incorrect place?
• Is code indented correctly throughout?
• Are variable names descriptive of what they represent? Is it easy to tell what each is referring to?
• Is a form successfully gathering input from users?