Show Me The Weather

Show Me The Weather article image

The Yahoo developer network offers APIs and tools for developers to use in projects. The Yahoo! Query Language (YQL) is used to retrieve and manipulate data. One interesting product is the weather API where you can get weather information from a specified location, including 5-day forecast, wind, atmosphere, astronomy conditions, and more. There´s possible to lookup weather by WOEID, city or lat/long.

So here I´ve come up with a little weather widget written in JavaScript – implemented as a traditional prototype class. It shows a weather condition icon, degrees in Celsius or Fahrenheit and the city location, using the Yahoo Weather API.

See the Pen Show Me The Weather by Martin (@camlcase) on CodePen.

The WOEID

WOEID stands for Where On Earth ID and is a unique identifier. Once assigned, is never changed or recycled. So if you´re going to show the weather for a specific place like a city, you should use this instead of the location based search. To find out the WOEID for a specific location, go to Yahoo Weather and search for it. Last part of the URL will contain the WOEID. In this case I use 906057, which represents Stockholm, Sweden.

Show Me The Weather Now

To put the weather widget on your page you will just have to create a new instance of the ShowMetTheWeather class, supply a location, handle the data (success and error) and call the now() function. Success is a function to be called when retrieving weather data succeeds. Error is a function to be called when something went wrong.

var smtw = new ShowMeTheWeather({
    woeid: '906057',
    success: function(weather) {
        var html = '<h2><i class="icon-'+weather.code+'"></i><br>'+weather.temp+'&deg;'+weather.units.temp+'</h2>';
            html += '<p>'+weather.city+'</p>';
        document.getElementById('smtw').innerHTML = html;
    },
    error: function(error) {
        div.innerHTML = '<p>'+error.message+'</p>';
    }
}).now();

Enjoy!