forecast.js

//forecast
var forecastDays = 3;

function loadJson(callback) {
	var forecast = new XMLHttpRequest();
	forecast.overrideMimeType("application/json");
forecast.open('GET', 'http://api.wunderground.com/api/<your api-key>/forecast/lang:<language code>/q/<country>/<city>.json',
	forecast.onreadystatechange = function () {
		  if (forecast.readyState == 4 && forecast.status == "200") {
			callback(forecast.responseText);
		  }
	};
	forecast.send(null);
}

loadJson(function(response) {

	// Build HTML

	var placeholderContent = "";

	for(var i = 1; i <= forecastDays; i++) {
		var day = i + 1;
		placeholderContent = placeholderContent +
		'<div class="space"></div>' +
		'<table>' +
          '<tbody>' +
            '<tr>' +
              '<td class="icon"><i id="icon_f_' + i + '" class=""></i></td>' +
              '<td colspan="3" class="forecast">Vorschau f&uuml;r Tag ' + day + ':<br><span id="forecast_str_' + i + '"></span></td>' +

              '<td class="icon"><i class="wi wi-thermometer"></i><i class="wi wi-direction-up"></i></td>' +
              '<td class="temp_high"><span id="temp_high_' + i + '"></span><small>&deg;C</small></div></td>' +
              '<td class="icon"><i class="wi wi-thermometer-exterior"></i><i class="wi wi-direction-down"></i></td>' +
              '<td class="temp_low"><span id="temp_low_' + i + '"></span><small>&deg;C</small></td>' +
            '</tr>' +
          '</tbody>' +
        '</table>' +
        '<div class="space"></div>';
	}

	document.getElementById("placeholder").innerHTML = placeholderContent;


	// Parse JSON string into object
    var r = JSON.parse(response);

	for (var i = 1; i <= forecastDays; i++) {
		var forecast_str = r.forecast.txt_forecast.forecastday[i+1].fcttext_metric; //change to .fcttext for fahrenheit
		var temp_high = r.forecast.simpleforecast.forecastday[i].high.celsius; //change to .fahrenheit for fahrenheit
		var temp_low = r.forecast.simpleforecast.forecastday[i].low.celsius; //change to .fahrenheit for fahrenheit
		var icon_f;
		var icons_f = r.forecast.txt_forecast.forecastday[i+1].icon;
		switch (icons_f) {
			case "clear":
				icon_f = "wi wi-day-sunny";
				break;
			case "cloudy":
				icon_f = "wi wi-day-cloudy";
				break;
			case "flurries":
				icon_f = "wi wi-day-sleet";
				break;
			case "fog":
				icon_f = "wi wi-day-fog";
				break;
			case "hazy":
				icon_f = "wi wi-day-haze";
				break;
			case "mostlycloudy":
				icon_f = "wi wi-day-cloudy";
				break;
			case "mostlysunny":
				icon_f = "wi wi-day-sunny-overcast";
				break;
			case "sleet":
				icon_f = "wi wi-day-sleet";
				break;
			case "rain":
				icon_f = "wi wi-day-showers";
				break;
			case "snow":
				icon_f = "wi wi-day-snow";
				break;
			case "sunny":
				icon_f = "wi wi-day-sunny";
				break;
			case "tstorms":
				icon_f = "wi wi-day-thunderstorm";
				break;
			case "unknown":
				icon_f = "wi wi-day-thunderstorm";
				break;
			case "partlycloudy":
				icon_f = "wi wi-day-cloudy";
				break;
			case "nt_clear":
				icon_f = "wi wi-stars";
				break;
			case "nt_cloudy":
				icon_f = "wi wi-night-alt-cloudy";
				break;
			case "nt_flurries":
				icon_f = "wi wi-night-alt-sleet";
				break;
			case "nt_fog":
				icon_f = "wi wi-night-fog";
				break;
			case "nt_hazy":
				icon_f = "wi wi-night-haze";
				break;
			case "nt_mostlycloudy":
				icon_f = "wi wi-night-cloudy";
				break;
			case "nt_mostlysunny":
				icon_f = "wi wi-night-sunny-overcast";
				break;
			case "nt_sleet":
				icon_f = "wi wi-night-sleet";
				break;
			case "nt_rain":
				icon_f = "wi wi-night-showers";
				break;
			case "nt_snow":
				icon_f = "wi wi-night-snow";
				break;
			case "nt_sunny":
				icon_f = "wi wi-night-sunny";
				break;
			case "nt_tstorms":
				icon_f = "wi wi-night-thunderstorm";
				break;
			case "nt_unknown":
				icon_f = "wi wi-night-thunderstorm";
				break;
			case "nt_partlycloudy":
				icon_f = "wi wi-night-cloudy";
				break;
		}

		document.getElementById("icon_f_" + i).className = icon_f;
		document.getElementById("forecast_str_" + i).innerHTML = forecast_str;
		document.getElementById("temp_high_" + i).innerHTML = temp_high;
		document.getElementById("temp_low_" + i).innerHTML = temp_low;
	}
});