Tutorial: Pitcher GETs Catcher

Pitcher GETs Catcher

If you buy tickets on Fandango or look up the location of a restaurant on Google Maps, you are using the web in one of its most common use-cases: gathering information from users and sending it to a server for processing. Over the next series of exercises, we will learn how to do that.

You can start by reading about the two most common methods for doing this: GET and POST

For this exercise, we will use GET to send data (name/value pairs) from one page to another using a URL query string like ?meat=chicken&veg=broccoli. The page sending is called "The Pitcher" and the page getting the data and displaying it is, of course, "The Catcher."

Here is an example of a finished project

	Directions
	Setup the Pitcher page with 2 (or more) input fields and a "Send" button. Think of some fun info (name/value pairs) you want to ask of your user and then display on the other page. For example, a band and their best song, a restaurant and their rating of it, a country they have visited and how to say "hello" in the local language, etc Label your input fields appropriately so users can enter in the right info. Write a function that runs when the button is pressed. In it, take the values from the input fields, and send them to the catcher page using window.location="catcherpage.html?name1=value1&name2=value2" Now setup a Catcher page with a label element using <text> or <p> Have the page grab the entire URL query string using var query = window.location.search and display it on the page Trim the "?" from the query, and also make any space characters look normal using decodeURIComponent Split the query into its pairs using query.split and display each pair separately. remember: split breaks up a phrase and puts all the pieces into an array. Now split each pair using pair.split and display the name and the value separately. Write a function getValue(name) that, given a name, returns the corresponding value. Finally, use getValue to display the data you gathered in a funny and relevant sentence, ie. If you're walking down the street in Thailand, you want to say Sawasdee* to greet people.* EXTRA CREDIT: add a searchbox where you can enter a name to get its value Finish the project till it looks perfect to you. Have fun and good luck!