Skip to content

Instantly share code, notes, and snippets.

@mike-zarandona

mike-zarandona/Weather Data + Icons from Yahoo.html

Last active September 14, 2021 13:44
Show Gist options
  • Save mike-zarandona/6294caf699dfaa44713a to your computer and use it in GitHub Desktop.
Save mike-zarandona/6294caf699dfaa44713a to your computer and use it in GitHub Desktop.
Download ZIP
Weather icon output parameter functions. `weatherData()` will fetch data from Yahoo's servers for a particular geography, and `weatherOutput()` handles parsing the data and writing the results to the DOM. Relies on the Yahoo Weather API and Weather Icons by Erik Flowers https://developer.yahoo.com/weather/ http://erikflowers.github.io/weather-ic…
Raw
Weather Data + Icons from Yahoo.html
<head>
<!-- Yahoo Weather Data -->
<script>
var yqlCallback = function(data) {
var extractedData = data.query.results.channel.item;
weatherData = extractedData;
},
weatherData;
</script>
<script src="https://query.yahooapis.com/v1/public/yql?q=select%20item%20from%20weather.forecast%20where%20woeid%20=%202356940&amp;format=json&amp;callback=yqlCallback"></script>
</head>
Raw
weatherData().js
var pageFunctions = {
weatherData: function() {
var yqlCallback = function(data) {
var extractedData = data.query.results.channel.item;
weatherData = extractedData;
},
weatherData;
}
}
Raw
weatherOutput().js
var pageFunctions = {
weatherOutput: function() {
var condCode = parseInt(weatherData.condition.code), // weather code to generate icon as an int
condTemp = weatherData.condition.temp, // temperature, in F°
condText = weatherData.condition.text, // condition text e.g. "cloudy"
condLink = weatherData.condition.link, // the URL to Yahoo! current weather conditions
condIcon;
// determine the proper
switch ( condCode ) {
case 0:
condIcon = 'tornado';
break;
case 1:
condIcon = 'tornado';
break;
case 2:
condIcon = 'hurricane';
break;
case 3:
case 4:
condIcon = 'day-thunderstorm';
break;
case 5:
case 6:
case 7:
condIcon = 'rain-mix';
break;
case 8:
case 9:
condIcon = 'showers';
break;
case 10:
case 11:
case 12:
condIcon = 'rain';
break;
case 13:
case 14:
case 15:
case 16:
condIcon = 'snow';
break;
case 17:
case 18:
condIcon = 'hail';
break;
case 19:
condIcon = 'dust';
break;
case 20:
case 21:
condIcon = 'fog';
break;
case 22:
condIcon = 'smoke';
break;
case 23:
case 24:
condIcon = 'windy';
break;
case 25:
condIcon = 'snowflake-cold';
break;
case 26:
condIcon = 'cloudy';
break;
case 27:
case 29:
condIcon = 'night-cloudy';
break;
case 28:
case 30:
condIcon = 'day-cloudy';
break;
case 31:
condIcon = 'night-clear';
break;
case 32:
condIcon = 'day-sunny';
break;
case 33:
condIcon = 'stars';
break;
case 34:
condIcon = 'sunny';
break;
case 35:
condIcon = 'rain-mix';
break;
case 36:
condIcon = 'hot';
break;
case 37:
case 38:
case 39:
condIcon = 'thunderstorm';
break;
case 40:
condIcon = 'sprinkles';
break;
case 41:
case 42:
condIcon = 'snow';
break;
case 44:
condIcon = 'day-cloudy';
break;
case 45:
condIcon = 'thundershower';
break;
case 46:
condIcon = 'snow';
break;
case 47:
condIcon = 'storm-showers';
break;
case 3200:
condIcon = 'thermometer-exterior';
break;
default:
condIcon = 'thermometer-exterior';
}
// add the css prefix
condIcon = 'wi-' + condIcon;
// set the image
$('.local-weather .icon i').addClass('wi').addClass(condIcon);
// set the temp
$('.local-weather .temp').html(condTemp + '&deg;');
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment