Web and Mobile App Development Assignment 2



CS275 Web and Mobile App Development
Assignment 2
As with this and all future assignments, you must work individually
The purpose of this assignment is learn how to utilize jQuery and Ajax to develop a web page to invoke
the Weather Wunderground web service and parse it’s JSON response.
The Weather Wunderground web service, introduced earlier in the term, can provide weather
information (forecasts, conditions, hourly readings, physical location of the client, etc.) from URL
based requests to a variety of data endpoints. The API for this application may be accessed at
As noted in the API documentation, requests can be make in the form of specially coded URLs, which
include the request parameters, to specific endpoints.
You are asked to develop a web page that:
1. Allows a user to enter his/her wunderground key
2. Click on a button to launch a request for the most recent hourly forecasts for the location
where the client resides
a. Read the Assignment 2 Activities section to see how you can find your current location.
3. Display this list of forecasts along with their associated weather symbols in the web page
Assignment 2 Activities
1. If you have not already done so, sign up for a key at the Weather Wunderground website:
2. Create the base HTML code, including a text field (to enter the key), a button (to launch the
hourly forecast script) and an empty div to eventually display the list of hourly forecast line
3. Create JavaScript code to:
a. Extract the key from the text field.
b. Create a url request to obtain the location (zip code will suffice) of the client. The
following url will accomplish this:
Note: At this point, you may want to manually run this request from the browser’s
address field in order to discover the JSON response structure needed to navigate to the
zip code.
c. Use jQuery’s Ajax feature to launch the request.
d. Parse the JSON response to obtain the zip code.
e. Incorporate the obtained zip code into the following url to create the hourly
forecast request:
As in the step above, manually run this request to determine the JSON response
f. Again, use jQuery’s Ajax feature to launch this request.
g. Finally, parse the JSON response to obtain and display the list of hourly forecast
readings along with their associated icons.
4. Mobilize!
a. Use jQuery Mobile to add a header and footer to your page that are fixed at the top and
bottom respectively.
b. Use jQuery Mobile’s table data-type and ui-responsive CSS to make your table resize
properly for mobile devices.
Debugging Hints:
1. Most browsers allow you to right-click somewhere on a webpage and choose something like
“Inspect”. This will bring up a window that allows you to see errors in Javascript among other
2. JavaScript has a function alert(object) that pops open a window with the object printed
out. This can be useful for debugging as well.
3. You could also make a div to change the innerHTML of for debugging purposes.
What to submit
For submission you are to submit (as a single zip file):
• A screen cast video to Blackboard detailing a thorough code review of your program along with
a demo execution of the application.
• Your source code, well internally documented. Your main html file should have the filename
• README file on how to run your code.
Grading (50) Points
• 40 points : program correctness and along with adherence to the stated requirements
• 5 points : quality of internal documentation and code style
• 5 points : README file


There are no reviews yet.

Be the first to review “Web and Mobile App Development Assignment 2”

Your email address will not be published.