Yahoo Weather

HTML

<div class="weather-widget">
  <h2></h2> 
  <select id="citySelector">
    <option value="sanfrancisco" selected="selected">San Francisco, Ca</option>
    <option value="losangeles">Los Angeles, Ca</option>
    <option value="sandiego">San Diego, Ca</option>
    <option value="sanjose">San Jose, Ca</option>
  </select>
  <button id="getForecast">
  Get Forecast
  </button>
    <div class="temp"></div>
    <div class="condition"></div>
    <ul class="ten-day" id="forecast"></ul>
</div>

CSS

body {
    background-color: #ccc;
    margin: 0;
    padding: 0;
}
.weather-widget {
    position: absolute;
    border: #919191 1px solid;
    padding: 10px;
    height: 250px;
    width: 550px;
    background: white;
    border-radius: 12px;
    font-family: arial, sans-serif;
    font-size: 11px;
    -webkit-box-shadow: 8px 8px 11px 1px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 8px 8px 11px 1px rgba(0, 0, 0, 0.6);
    box-shadow: 8px 8px 11px 1px rgba(0, 0, 0, 0.6);
    top: 20%;
    left: 30%;
    margin: -80px 0 0 -155px;
}
.weather-widget h2 {
    font-size: 2em;
    margin: 0;
    text-align: left;
    display: block;
    font-weight: normal;
}
.weather-widget h3 {
    font-size: 1.2em;
    margin: 0 0 3px 0;
    display: block;
    font-weight: 600;
}
.weather-widget .temp {
    font-size: 5em;
    padding: 6px 0 0;
    float: center;
}
.weather-widget .condition {
    width: 100px;
    text-align: center;
    line-height: .8em;
    float: center;
}
.weather-widget .desc {
    display: block;
    width: 100px;
}
.weather-widget ul {
    list-style: none;
    display: block;
    padding: 0;
    margin: 0 auto 0 8px;
    clear: both;
}
.weather-widget ul li {
    list-style-type: none;
    float: left;
    width: 15%;
    padding: 0 2%;
    height: 75px;
    text-align: center;
    margin: 10px 0;
}
.weather-widget ul li:last-child {
    border-right: none;
}
.weather-widget ul li div span {
    padding: 0 2px;
}

JavaScript

var forecast;

var apiPrefix = 'https://query.yahooapis.com/v1/public/yql?q=select%20*' +
                '%20from%20weather.forecast%20where%20woeid%20in%20' +
                '(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22';

var apiSuffix = '%2C%20ca%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys';


document.getElementById("citySelector").addEventListener("change", saveCitySelection);
document.getElementById("getForecast").addEventListener("click", getForecast);

function saveCitySelection() {
  var citySelect = document.getElementById("citySelector");
  var city = citySelect.options[citySelect.selectedIndex].value;
	localStorage['city'] = city;
}

function getForecastData() {
  var citySelect = document.getElementById("citySelector");
  var city = citySelect.options[citySelect.selectedIndex].value;
  if(localStorage['city'] !== undefined) {
  	city = localStorage['city'];
    document.getElementById("citySelector").value = city;
  }
 debugger;
  $.getJSON(apiPrefix + city + apiSuffix, function (data) {
      var title = data.query.results.channel.item.title.match('for(.*)at');
      debugger;
       
       document.getElementsByClassName("weather-widget")[0]
      .getElementsByTagName("h2")[0]
      .firstChild
      .nodeValue = title[1];
      
      $.each(data.query.results.channel.item.forecast, function (i, thisday) {
          $('<li/>', {
              html: '<h3>' + thisday.day +
               '</h3><div><span>' + thisday.high +
               '&deg;</span>/<span>' + thisday.low +
               '&deg;</span></div>' + '<div>' + thisday.date +
               '</div><div>' + thisday.text + '</div>'
          }).appendTo('.weather-widget ul');
      });
  });
}

function getForecast(){
	document.getElementById("forecast").innerHTML = "";
	getForecastData();
}


angular.element(document).ready(function () {
        getForecastData();
});

//$(function () {
 //   getForecastData();
//});