Assignment Two
Due @ 6:00AM on February 10, 2014 (Submit via Camino)
Now that you’ve created an awesome interactive mock up in the previous assignment, we’re now going to take that mock up and make it into a real, breathing app.
As a result, it’s time to collapse the three HTML pages that you mocked up and make them use real data using jQuery. The goal of this assignment is to retrieve the weather data from forecast.io, that provides a great weather API that you can use for free. You’ll need to get an API key, but it is quite easy. You will get data for your “Current Location”, San Jose, and Sydney. In the next assignment, we will get data from any city.
Requirements
- Show dynamic weather for “Current Location”, San Jose, and Sydney
- Use the HTML5 location API to get your current location
- Lat/long for San Jose: 37.3382082/-121.88632860000001
- Lat/long for Sydney: -33.8674869/151.20699020000006
- Show the cities in the list and also, in the cities detail pages
- Switch between screens using routing. You should be able to refresh the page and end up in the right place.
- The list is
#
or blank - Current location is
#city/currentlocation
- San Jose is
#city/sanjose
- Sydney is
#city/sydney
- The list is
- You should be able to switch between Celsius and Fahrenheit. Default to Fahrenheit
- Use jQuery only for this assignment
- Make the weather icons provided as they match values in the API directly
- Use local storage to save the last data that you got from the server immediately. Then call the API to get the latest data.
- Refresh weather data at lest every 10 minutes
- Refresh the time every one minute (without calling the server)
- Use only supplied images for the weather icons (download zip)
Some useful conversions
- Speed or distance. SI units (km) to miles = 0.621371 * km
- Used for things like visibility, wind speed, etc
- Temperature. SI units (Celsius) to Fahrenheit = (celsius * 2) + 30)
- Pressure from HPA (SI unit) to inches = (pressure0.000295299830714100)
- Precipitation in SI (mm) to inches = (precipitation * 0.0393701)
- Wind bearing. See: ttp://stackoverflow.com/questions/3209899/determine-compass-direction-from-one-lat-lon-to-the-other
What to turn in:
- index.html
- weather.js
- styles.css
- styles.less (if you use LESS for CSS)
- jQuery file (or not if externally linked)
- Image assets
Retrieving Data From Forecast.io
Weather data is retrieved through latitude and longitude combinations, which means that it is very easy to get weather data for any location:
https://api.forecast.io/forecast/<apikey>/<lat>,<long>
So, let’s say my API key is a157e0906b1d14fa719de4d1dada05325
, and my latitude is 40.7142
and my longitude is -74.0064
the call would be:
https://api.forecast.io/forecast/a157e0906b1d14fa719de4d1dada05325/40.7142,-74.0064
The app can also change between Celsius and Fahrenheit. Do do this, pass in si
for Celsius or us
for Fahrenheit:
https://api.forecast.io/forecast/a157e0906b1d14fa719de4d1dada05325/40.7142,-74.0064?units=si
https://api.forecast.io/forecast/a157e0906b1d14fa719de4d1dada05325/40.7142,-74.0064?units=us
API Documentation
API documentation is available at: https://developer.forecast.io/docs/v2 and here is a sample request and response:
Sample Request
https://api.forecast.io/forecast/<apikey>/37.3382082,-121.88632860000001
Sample Response
It’s quite large, so here it is in a JSON file.
Getting an API key
To get an API key, create an account here: https://developer.forecast.io/register.
Background colors
Night ColorStart: #141830 Night ColorEnd: #262c43 Night Color Text And Lines: #8d8f9a
Night Cloudy Color Start: #0b131e Night Cloudy Color End: #232931 Night Cloudy Color Text And Lines: #8b8f92
Day Color Start: #2f76a1 Day Color End: #549dc5 Day Color Text And Lines: #a1c8df
Day Cloudy Color Start: #718291 Day Cloudy Color End: #617588 Day Cloudy Color Text And Lines: #b6c0c9