HOME | v2-js-fiddle

Weather API

Edit Text

Animation Effects

JAVASCRIPT PLAYGROUND:

let location = 'New York';
location = encodeURIComponent(location);

fetch('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'+location+'%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys')
  .then(res => res.json())
  .then(json => {
    let channel = json.query.results.channel;
    let temp = channel.item.condition.temp;
    let code = channel.item.condition.code;
    let text = channel.item.condition.text;
    $w('#city').text = channel.location.city;
    $w('#city2').text = channel.location.city;
    $w('#temp').text = temp + '°';
    $w('#status').text = text;
    $w('#temp2').text = temp + '°';
    $w('#status2').text = text;
  	
  	debugger;

if (['32', '34', '36'].indexOf(code) > -1) {
      $w('#weatherImageLight').src = 
"image://v1/4bc52e_0b2bcd511f394757bee151c63eeee72a~mv2.png/537_516/Day-Sunny.png";
      $w('#slideshow').changeSlide(1);
    }
    else if (['8', '9', '10', '11', '12', '17', 
        '35', '38', '39', '40', '47'].indexOf(code) > -1) {
      $w('#weatherImageLight').src = 
"image://v1/4bc52e_e70b58345a924f3b88305ee8be5af271~mv2.png/540_519/Rainy-Day.png"
      $w('#slideshow').changeSlide(0);
    }
    else if (['31', '33'].indexOf(code) > -1) {
      $w('#weatherImageDark').src = 
"image://v1/4bc52e_6a041567bf19437bbf9d560963ed95e3~mv2.png/540_519/Clear-Night.png"
      $w('#slideshow').changeSlide(0);
    }
    else if (['5', '7', '15', '41'].indexOf(code) > -1) {
      $w('#weatherImageDark').src = 
"image://v1/4bc52e_5074f7309c5347fdbc61dd96ce88e643~mv2.png/540_519/Snowy-Night.png"
      $w('#slideshow').changeSlide(0);
    }
    else if (['21', '26', '27', '29'].indexOf(code) > -1) {
      $w('#weatherImageDark').src = 
"image://v1/4bc52e_db317efad8214b9e91ac51bf46248f69~mv2.png/540_519/Foggy-Night.png"
      $w('#slideshow').changeSlide(0);
    }
    else if (['18', '19', '20', '22', '23', 
        '24', '25', '28', '30', '44'].indexOf(code) > -1) {
      $w('#weatherImageLight').src = 
"image://v1/4bc52e_9fc564c2e22e45fc9e05c3224aa9ad9d~mv2.png/540_519/Foggy-Day.png"
      $w('#slideshow').changeSlide(1);
    }
    else if (['13', '14', '16', '42', '46'].indexOf(code) > -1) {
      $w('#weatherImageLight').src = 
"image://v1/4bc52e_41a3d0740be846d2bc2526cdde313881~mv2.png/540_519/Snowy-Day.png"
      $w('#slideshow').changeSlide(1);
    }
    else {
      $w('#weatherImageDark').src = 
"image://v1/4bc52e_9af24280513445c3a4dd098fac7f7237~mv2.png/540_519/Rain-Night.png"
      $w('#slideshow').changeSlide(0);
    }
  	
  });

Enter a city name to view the weather (e.g. New York).

Code Output

Run Code

JAVASCRIPT PLAYGROUND:

Full Forecast at Yahoo! Weather

(provided by The Weather Channel)

London

12 °

Rainy