SOCR HTML5 WeatherAPIProject 2014

From Socr

Jump to: navigation, search


SOCR Project - Dynamic Weather API Project


This project will will utilize real-time dynamic weather data from Yahoo to make statistical comparisons across cities and demonstrate how to pull weather data via external API.

Project Goals

We will use the YQL Console to help us easily retrieve data. You will have to make multiple ajax calls for each user search. The user will first enter a zip code. Use the Yahoo Weather API to determine the woeid (Where on Earth IDentifier), which is used in Yahoo Weather. Yahoo Weather's API only takes a unique weather ID that is unique to Yahoo to relay weather information. Obviously users won't know the location IDs a priori. The interface will ask users to input a zip code, and then retrieve the woeid for that zip code from this API function and go about retrieving the weather data.


  1. User enters a zip code (e.g., 90024)
  2. Use this API function (geo.places) on the console
  3. The woeid will be in (for ZIP=90024, woeid=12795632)
  4. This woeid (e.g. 12795632) can then be used in Yahoo Weather's API call
  5. You will then see all the weather objects for our desired zip code below (e.g., wind.direction), and this is what we will use in our application

NOTE: If you are not seeing anything below where it says 'formatted view' then make sure 'JSON' is clicked and diagnostics is checked. Click the blue button TEST.


Below all the API results you will see "THE REST QUERY". If you copy paste this link into a new tab you will notice all the JSON output from the request. The idea is to use this link with ajax along with a function to be ran after you "call" this URL.

  • Example (using previous example, ZIP=90024):

$.ajax ({ url:*%20from%20weather.forecast%20where%20woeid%3D12795632&format=json&diagnostics=true&callback=, success: cb });

where cb (can be named anything) is the success function that manipulates the objects returned by ajax and the rest query:

function cb(data) {

... your code here ...


In this example, if you set a variable named 'direction' to the data returned from ajax, you would do something like: var direction = data.query.results.wind.direction;

  • Google 'asynchronous function': This cb is asynchronous, which means that whatever variables you create in this function and whatever objects are stored in the parameter data (in this case all the weather stuff) will be unrecognizable by any other function in your program.
  • The challenges with ajax: Storing information in your html since other functions will not be able to recognize the data without another ajax call, manipulating and creating the url that you use in ajax based off user input
  • What to Do: So the idea here is to use these numbers and do something cool with it. Whereas the To-Do list was very explicit with what we wanted, this one will have more leeway. Here is what your program should be able to do:
    • Take user input (zip codes only) in the text field, verify that the input is in fact a zip code (for our purposes, just make sure that the input is only numbers and 5 characters long)
    • Utilize the following data retrieved from the API:
      • Current temperature
      • High
      • Low
      • What it feels like (this is wind chill)
      • Sunrise
      • Sunset
      • Humidity
      • Barometer (this is pressure) with a notation 'R' if rising and 'F' if falling
      • Wind Speed and Direction
      • The 5 day forecast

You can use (basic?) tables to display this stuff. For example, using ZIP=90024:

  • We want to be able to display two cities at once (one on left, one on right)
  • Calculate the differences in current temperature and each forecasted day between cities

e.g., LA is 73, Philadelphia is 45 today; LA 54 Philly 44 tomorrow

  • Display:
    • "LA is 28 degrees warmer than Philadelphia today."
    • "LA is projected to be 10 degrees warmer than Philadelphia tomorrow."
    • *Put all these facts into a box below both cities and their information
    • When there are two cities displayed and the user types in a new zip code and presses the button that triggers your API, prompt the user and ask which existing city they would like to replace

Project Specifics

Use Bootstrap to enhance the look of the page. The image below illustrates a schematic layout for the webapp. Download the SOCR Webapp template and start with it.

See also

Translate this page:









الامارات العربية المتحدة


इस भाषा में









Česká republika





Personal tools