Guest User

Untitled

a guest
Jan 13th, 2017
158
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. //forecast
  2. var forecastDays = 2;
  3.  
  4. function loadJson(callback) {
  5.     var forecast = new XMLHttpRequest();
  6.     forecast.overrideMimeType("application/json");
  7.     forecast.open('GET', 'http://api.wunderground.com/api/<your api-key>/forecast/lang:<language code>/q/<country>/<city>.json', true);
  8.     forecast.onreadystatechange = function () {
  9.           if (forecast.readyState == 4 && forecast.status == "200") {
  10.             callback(forecast.responseText);
  11.           }
  12.     };
  13.     forecast.send(null);
  14. }
  15.  
  16. loadJson(function(response) {
  17.    
  18.     // Build HTML
  19.    
  20.     var placeholderContent = "";
  21.    
  22.     for(var i = 1; i <= forecastDays; i++) {
  23.         var day = i + 1;
  24.         placeholderContent = placeholderContent +  
  25.         '<div class="space"></div>' +
  26.         '<table>' +
  27.           '<tbody>' +
  28.             '<tr>' +
  29.               '<td class="icon"><i id="icon_f_' + i + '" class=""></i></td>' +
  30.               '<td colspan="3" class="forecast">Vorschau f&uuml;r Tag ' + day + ':<br><span id="forecast_str_' + i + '"></span></td>' +
  31.             '</tr>' +
  32.           '</tbody>' +
  33.         '</table>' +
  34.         '<div class="space"></div>' +
  35.         '<table>' +
  36.           '<tbody>' +
  37.             '<tr>' +
  38.               '<td class="icon"><i class="wi wi-thermometer"></i><i class="wi wi-direction-up"></i></td>' +
  39.               '<td class="temp_high"><span id="temp_high_' + i + '"></span><small>&deg;C</small></div></td>' +
  40.               '<td class="icon"><i class="wi wi-thermometer-exterior"></i><i class="wi wi-direction-down"></i></td>' +
  41.               '<td class="temp_low"><span id="temp_low_' + i + '"></span><small>&deg;C</small></td>' +
  42.             '</tr>' +
  43.           '</tbody>' +
  44.         '</table>';    
  45.     }  
  46.    
  47.     document.getElementById("placeholder").innerHTML = placeholderContent;
  48.    
  49.    
  50.     // Parse JSON string into object
  51.     var r = JSON.parse(response);
  52.  
  53.     for (var i = 1; i <= forecastDays; i++) {
  54.         var forecast_str = r.forecast.txt_forecast.forecastday[i+1].fcttext_metric; //change to .fcttext for fahrenheit
  55.         var temp_high = r.forecast.simpleforecast.forecastday[i].high.celsius; //change to .fahrenheit for fahrenheit
  56.         var temp_low = r.forecast.simpleforecast.forecastday[i].low.celsius; //change to .fahrenheit for fahrenheit
  57.         var icon_f;
  58.         var icons_f = r.forecast.txt_forecast.forecastday[i+1].icon;
  59.         switch (icons_f) {
  60.             case "clear":
  61.                 icon_f = "wi wi-day-sunny";
  62.                 break;
  63.             case "cloudy":
  64.                 icon_f = "wi wi-day-cloudy";
  65.                 break;
  66.             case "flurries":
  67.                 icon_f = "wi wi-day-sleet";
  68.                 break;
  69.             case "fog":
  70.                 icon_f = "wi wi-day-fog";
  71.                 break;
  72.             case "hazy":
  73.                 icon_f = "wi wi-day-haze";
  74.                 break;
  75.             case "mostlycloudy":
  76.                 icon_f = "wi wi-day-cloudy";
  77.                 break;
  78.             case "mostlysunny":
  79.                 icon_f = "wi wi-day-sunny-overcast";
  80.                 break;
  81.             case "sleet":
  82.                 icon_f = "wi wi-day-sleet";
  83.                 break;
  84.             case "rain":
  85.                 icon_f = "wi wi-day-showers";
  86.                 break;
  87.             case "snow":
  88.                 icon_f = "wi wi-day-snow";
  89.                 break;
  90.             case "sunny":
  91.                 icon_f = "wi wi-day-sunny";
  92.                 break;
  93.             case "tstorms":
  94.                 icon_f = "wi wi-day-thunderstorm";
  95.                 break;
  96.             case "unknown":
  97.                 icon_f = "wi wi-day-thunderstorm";
  98.                 break;
  99.             case "partlycloudy":
  100.                 icon_f = "wi wi-day-cloudy";
  101.                 break;
  102.             case "nt_clear":
  103.                 icon_f = "wi wi-stars";
  104.                 break;
  105.             case "nt_cloudy":
  106.                 icon_f = "wi wi-night-alt-cloudy";
  107.                 break;
  108.             case "nt_flurries":
  109.                 icon_f = "wi wi-night-alt-sleet";
  110.                 break;
  111.             case "nt_fog":
  112.                 icon_f = "wi wi-night-fog";
  113.                 break;
  114.             case "nt_hazy":
  115.                 icon_f = "wi wi-night-haze";
  116.                 break;
  117.             case "nt_mostlycloudy":
  118.                 icon_f = "wi wi-night-cloudy";
  119.                 break;
  120.             case "nt_mostlysunny":
  121.                 icon_f = "wi wi-night-sunny-overcast";
  122.                 break;
  123.             case "nt_sleet":
  124.                 icon_f = "wi wi-night-sleet";
  125.                 break;
  126.             case "nt_rain":
  127.                 icon_f = "wi wi-night-showers";
  128.                 break;
  129.             case "nt_snow":
  130.                 icon_f = "wi wi-night-snow";
  131.                 break;
  132.             case "nt_sunny":
  133.                 icon_f = "wi wi-night-sunny";
  134.                 break;
  135.             case "nt_tstorms":
  136.                 icon_f = "wi wi-night-thunderstorm";
  137.                 break;
  138.             case "nt_unknown":
  139.                 icon_f = "wi wi-night-thunderstorm";
  140.                 break;
  141.             case "nt_partlycloudy":
  142.                 icon_f = "wi wi-night-cloudy";
  143.                 break;
  144.         }
  145.        
  146.         document.getElementById("icon_f_" + i).className = icon_f;
  147.         document.getElementById("forecast_str_" + i).innerHTML = forecast_str;
  148.         document.getElementById("temp_high_" + i).innerHTML = temp_high;
  149.         document.getElementById("temp_low_" + i).innerHTML = temp_low;
  150.     }
  151. });
RAW Paste Data