Description

Assignment #5
AJAX & JavaScript Libraries and Frameworks
CS193C Summer 2017, Young

AJAX
For the AJAX section of our assignment we’ll retrieve weather information from openweathermap.org. Here is a screenshot showing the AJAX assignment in action:

The user enters in a ZIP code and clicks on “Get Weather”. The weather for that ZIP code is retrieved from openweathermap.org and added to a textarea. Weather information listed should include the City corresponding to the ZIP code and the temperature (which is provided to us by openweathermap.org). The textarea should list all requests made. The user can click on the “Clear” button to clear the textarea.
We’ll need to teach you a few things in order to get this assignment up and running.
Creating an Account with OpenWeatherMap.org
Go to:
http://openweathermap.org/
Sign Up for an account (upper-right of website). Once you’ve created an account, go to your account summary and switch to the “API Keys” tab. You’ll need to have an API Key to communicate with the server.
Requesting Weather Reports
To make a request to the server for the weather at a particular zipcode the request format is: http://api.openweathermap.org/data/2.5/weather?zip=zipcodeDesired,us&units=imperial&APPID=yourAPIKey
where zipcodeDesired is replaced by the zipcode you want and yourAPIKey is replaced by your account’s API key.
Getting Weather Information
You’ll pass your URL to OpenWeatherMap.org. After a brief delay, you should get a response providing the weather at the location.
var result = JSON.parse(requestObj.responseText);
&mode=xml
var result = requestObj.responseXML;
you can then move around the resulting XML tree using the getElementById, getElementsByTagName, and the other standard operations available for moving around the HTML tree.
To take a closer look at what the JSON or the XML look like, instead of using the URL above from JavaScript, instead just enter it directly into the web browser location bar and you should get a result back looking something like this:

Or like this:
2

3
JQuery
We’ll keep the JQuery section simple and similar to the in-class examples. Our objective is to just give you just a bit of hands on experience so that you’ll remember what you saw in lecture a bit better.
Start out with the jquery-practice.html file provided with this assignment’s downloads. This file contains no JavaScript and no JQuery. It does contain HTML along with some CSS Styles. It also contains several buttons which you’ll need to wire up to carry out various JQuery tasks.
Get JQuery Loaded
First things first, you need to get JQuery loaded. I’ve provided a JQuery file with the assignment downloads. Load it in using a standard <script> tag.
Turn Headings Red
Fading Items
Wire up the second button so that when the user clicks on it the heading “Speakers” fades out over a 1 second (1,000 millisecond) period. Fade just the <h3> tag, not the subsequent paragraph on speakers. Once the heading has completely faded out, it will be removed from the normal text flow and the subsequent paragraph will be bumped up. This is normal and not something you need to correct.
AngularJS
Create an AngularJS application which allows a user to display information on cities. Use the following actual city data:

Include a single text field which can be used to filter based on information contained in any of the columns. Here are a few screenshots of the application in action:

5