http://clarity-89.github.io/Local_Weather/weather.js

1/**
2 * Created by Alex on 31.7.2015.
3 */
4$(document).ready(function () {
5    function showWeather(el) {
6        navigator.geolocation.getCurrentPosition(success, err);
7        function err(e) {
8            el.text('Geolocation error ' + e.code + ': ' + e.message);
9        }
10
11        function success(pos) {
12            var lat = pos.coords.latitude;
13            var long = pos.coords.longitude;
14            // Create a url for a GET request
15            var url = 'http://api.openweathermap.org/data/2.5/weather?' + 'lat=' + lat + '&lon=' + long + '&units=metric' + '&APPID=435b46fa1cb21702b91736f300312c5c';
16            $.getJSON(url)
17                .done(function (data) {
18
19                    // Create handlebars.js template
20                    var img = "https://dl.dropboxusercontent.com/u/28151607/icons/" + data.weather[0].icon + '.png';
21                    var source = $("#weather_display").html();
22                    var template = Handlebars.compile(source);
23                    var context = template({
24                        city: data.name,
25                        country: data.sys.country,
26                        image: img,
27                        temperatureC: data.main.temp.toFixed(0),
28                        temperatureF: celcToFahr(data.main.temp),
29                        clouds: cloudiness(data.clouds.all),
30                        wind: 'Wind: ' + data.wind.speed + ' m/s'
31                    });
32                    el.html(context);
33
34                    console.log(data.weather[0].icon);
35                    setBackground(data.weather[0].icon);
36                    $(".loading").fadeOut("slow");
37
38                })
39                .fail(function () {
40                    el.append($('<div id="err"></div>').text('Could not get the data at the moment. Please try again later.'));
41                })
42        }
43    }
44
45    // Function to convert percentage of cloudiness to its verbal description
46    // source: http://www.theweatherprediction.com/habyhints/189/
47    function cloudiness(cloudPercentage) {
48        switch (true) {
49            case (cloudPercentage <= 10):
50                return 'Clear sky';
51            case (cloudPercentage > 10 && cloudPercentage <= 20):
52                return 'Fair';
53            case (cloudPercentage > 20 && cloudPercentage <= 35):
54                return 'Mostly Sunny';
55            case (cloudPercentage > 35 && cloudPercentage <= 60):
56                return 'Partly Cloudy';
57            case (cloudPercentage > 60 && cloudPercentage <= 85):
58                return 'Mostly Cloudy';
59            default:
60                return 'Cloudy';
61        }
62    }
63
64    // Set background of the container according to the time of a day or weather conditions
65    // based on the icon from the API
66    function setBackground(icon) {
67        if (icon[icon.length - 1] == 'n') {
68            $(".container").css("background-image", "url('https://dl.dropboxusercontent.com/u/28151607/backgrounds/moon.jpg')");
69        } else {
70            if (icon == '50d') {
71                $(".container").css("background-image", "url('https://dl.dropboxusercontent.com/u/28151607/backgrounds/fog.jpg')");
72            } else if (icon == '02d' || icon == '03d' || icon == '04d') {
73                $(".container").css("background-image", "url('https://dl.dropboxusercontent.com/u/28151607/backgrounds/cloudy1.jpg')");
74            } else if (icon == '09d' || icon == '10d' || icon == '11d') {
75                $(".container").css("background-image", "url('https://dl.dropboxusercontent.com/u/28151607/backgrounds/rain.jpg')");
76            } else if (icon == '13d') {
77                $(".container").css("background-image", "url('https://dl.dropboxusercontent.com/u/28151607/backgrounds/snow.jpg')");
78            } else {
79                $(".container").css("background-image", "url('https://dl.dropboxusercontent.com/u/28151607/backgrounds/sun.jpg')");
80            }
81        }
82    }
83
84    // Convert Celcius to Fahrenheit + round to integer
85    function celcToFahr(celcius) {
86        return (celcius * (9 / 5) + 32).toFixed(0);
87    }
88
89    var c = $('#inner_cont');
90
91    showWeather(c);
92
93});