JS: Weather

http://freegeoip.net/ http://openweathermap.org/API http://metwit.com/weather-api/ http://www.wunderground.com/weather/api/d/pricing.html?MR=1 http://jsfiddle.net/davidchase03/23HQC/ inspired by: http://jobyj.in/api/create-a-weather-widget-using-jquery-yql-and-weather-com/

by Mukul kant

HTML

<div id="weather">
    <h1>#{city}</h1>
    <img src="http://openweathermap.org/img/w/#{icon}.png">
    #{temp}°
    <p>#{desc} kyk</p>
</div>

CSS

body {
    font: 400 26px sans-serif;
    text-align: center
}

#weather {
    display: none
}

JavaScript

var getLocation = function (fn) {

    if (navigator.geolocation) return navigator.geolocation.getCurrentPosition(function (location) {
        fn(location);
    });

    $.ajax({
        url: '//geoplugin.net/json.gp',
        dataType: 'jsonp',
        jsonp: 'jsoncallback',
        success: function (data) {
            fn({
                coords: {
                    latitude: data.geoplugin_latitude,
                    longitude: data.geoplugin_longitude
                }
            });
        }
    });

};

var convertFtoC = function(F) {
    return (5/9) * (F-32);
};

var convertCtoF = function(C) { 
    return (9/5) * (C+32);
};

var format = function (data) {
    var args = arguments;
    return data.replace(/#{(\d+|(\w+))}/g, function (s, i, p) {
        return (p && args[1] ? args[1][p] : args[i]) || s;
    });
};

getLocation(function (location) {
    $.ajax({
        url: '//api.openweathermap.org/data/2.5/weather?lat=' + location.coords.latitude + '&lon=' + location.coords.longitude + '&lang=de&units=metric',
        dataType: 'jsonp',
        success: function (result) {
            var data = {
                city: result.name,
                icon: result.weather[0].icon,
                temp: result.main.temp,
                desc: result.weather[0].description
            };
            // console.log(result);
            document.body.innerHTML = format(document.body.innerHTML, data);
            document.getElementById('weather').style.display = 'block';
        }
    });
});