The "city browser"

Link here
This was a one week web 2.0 project done for the CS242 course at the University of Illinois. The assignment was to be creative, come up with a project involving dynamic web content with no page refreshes, and to go nuts. CS242's ultimate goal was coding practice (for example, commenting code, making sure it was understandable and not a jumbled mess, and the like), so a more boring project may have been a safer bet... but a boring project would've been boring.

The result was the "city browser". I learned to use JSON in conjunction with Javascript for this assignment, and using data from yahoo and geonames.org I created a small web page that ... well, it's a little hard to explain.


Here's how it works. The user (you) types in the name of a city or specific location into the search box, then hits search. Then the following things happen:

1a) a request is sent to yahoo with whatever was entered into the box as a query
2a) Yahoo!'s JSON services return a JavaScript object with the first 10 search results
3a) those results are displayed in the left panel

1b) simultaneously, a similar request is sent to geonames.org, which collects geographic and weather data and has a JSON service of its own as well.
2b) geonames.org returns a JavaScript object with 4 locations + data.
3b) That data goes into the rightmost panel.

4) By clicking on any of the locations in the right panel, another request is sent to geonames.org. The returned data from this request is displayed in the middle panel, and includes the current weather data at that location.