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.

Assignment 1 Sample Solution

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
  • 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

What to turn in:

  1. index.html
  2. weather.js
  3. styles.css
  4. styles.less (if you use LESS for CSS)
  5. jQuery file (or not if externally linked)
  6. 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

Video of my app in action:

As per the syllabus: Late assignments will be deducted 1% per minute late, up to a maximum penalty of 50% (in the absence of evidence of extenuating circumstances). No assignments will be accepted after the due date for the final assignment.