Many Internet hosts allow others to use their content through an Application Programming Interface: an interface definition for requesting services from an existing program. Popular sites from Google to Flickr or Facebook provide publicly-available APIs for developers like us to use in both web and standalone applications. If you are interested in the types of resources that exist, please take a look at this list.
For this particular exercise, we will be using data from Urban Dictionary, a web site dedicated to cataloguing slang and other social terminology. (NOTE: Some content on Urban Dictionary may be considered offensive.) Our TA Jeff Prouty has written a PHP web application that serves content from the Urban Dictionary, stored at the following URL:
http://students.washington.edu/jprouty/urban.php
You can request a word definition from it by passing a query string with a term parameter. For example, to get the definition for the term "API," you could enter the following URL:
http://students.washington.edu/jprouty/urban.php?term=API
As you can see by clicking on that link and viewing its source, the script returns its definitions in HTML form. Note that this means you will NOT be dealing with XML in this lab.
We would like you to write a page that provides a search box for the Urban Dictionary. When a user clicks either inside the search box or on the "search" button placed near it, the definition of the word in the box should be fetched and displayed underneath.
The purpose of this lab is to give you practice with Javascript and Ajax, so we're providing you with HTML and CSS files to get you started. To use these files, add the code that performs lookups on Jeff's PHP web app and displays their results on the current web page. Listen for clicks on the button with CSS ID submit, and place the results onto the page in the section with CSS ID resultsArea.
As part of your lab, find a favorite Urban Dictionary term. Write Javascript code so that the page starts in an initial configuration with your term in the text box, with its definition showing below on the page.
You will not be able to run Ajax code locally or on a host other than Dante, so you must upload your files to test them. If you upload your files to a password-protected area, you may need to change your Ajax request URLs to https rather than http.
If you complete the basic functionality of displaying definitions on the page, modify the CSS to make your page look snazzy. You can style the page in general, such as by defining a background image or changing fonts. The HTML returned by the web app also has various CSS classes attached to it for which you can define styles. Here is a sample of the results sent back for a query for the word "hoser":
<div class="result"> <h2 class="word">hoser</h2> <p class="definition">Canadian term popularized by the McKenzie brothers referring to someone clumsy or stupid who drinks beer excessivly.</p> <p class="example"><em>"You hoser, eh!"</em></p> <p class="info">by <a href="http://www.urbandictionary.com/author.php?author=Bowman">Bowman</a></p> </div> <div class="result"> <h2 class="word">hoser</h2> <p class="definition">Derived from the term used by popular Canadian icons Bob and Doug Mackenzie. The literal definition of a hoser, according to Bob and Doug, is "What you call your little brother when your mom's in the room."</p> <p class="example"><em>Take off, eh? You're such a hoser.</em></p> <p class="info">by <a href="http://www.urbandictionary.com/author.php?author=Jimmy">Jimmy</a></p> </div>
If you're satisfied with the styling of your page, you may wish to add features to it, such as the ability to search for multiple words and have all their definitions remain on the page at once.
If you think this is really neat, you can get your own key to gain access to the Urban Dictionary API. You may be interested in checking out their Javascript sample code.
When you're satisfied with your page, you may optionally wish to turn it in so that we can see it, or upload it to your UW web space. You may need to ZIP your files for them to submit successfully.