https://www.princeton.ca/Scripts/yahoo-weather.js

1// Get the WOEID by supplying the postal code
2// http://woeid.rosselliot.co.nz
3
4// Weather icons I used in this custom Yahoo Weather
5// Version 2.0
6// http://erikflowers.github.io/weather-icons
7
8
9var param = {
10    woeid: '9782',
11    appID: 'IE0ez64g',
12    consumerKey: 'dj0yJmk9UUtBWVNVbEU0TWRJJnM9Y29uc3VtZXJzZWNyZXQmc3Y9MCZ4PTAz',
13    consumerSecret: 'ca2ecda2a8f94e013abf9cd4d1e725cdd5884b30',
14    domain: 'https://webapi.municipalwebsites.ca',
15    unitID: 'c',
16    format: 'json'
17}
18
19function fnWeatherIcons($weatheCode) {
20    // Converts the Yahoo Codes to icon class
21    switch ($weatheCode) {
22        case 0:
23            $weatherIcon = 'tornado';
24            break;
25
26        case 1:
27            $weatherIcon = 'thunderstorm';
28            break;
29
30        case 2:
31            $weatherIcon = 'hurricane';
32            break;
33
34        case 3:
35            $weatherIcon = 'day-thunderstorm';
36            break;
37
38        case 4:
39            $weatherIcon = 'thunderstorm';
40            break;
41
42        case 5:
43            $weatherIcon = 'rain-mix';
44            break;
45
46        case 6:
47            $weatherIcon = 'sleet';
48            break;
49
50        case 7:
51            $weatherIcon = 'sleet';
52            break;
53
54        case 8:
55            $weatherIcon = 'showers';
56            break;
57
58        case 9:
59            $weatherIcon = 'showers';
60            break;
61
62        case 10:
63            $weatherIcon = 'rain';
64            break;
65
66        case 11:
67            $weatherIcon = 'showers';
68            break;
69
70        case 12:
71            $weatherIcon = 'showers';
72            break;
73
74        case 13:
75            $weatherIcon = 'snow';
76            break;
77
78        case 14:
79            $weatherIcon = 'snow';
80            break;
81
82        case 15:
83            $weatherIcon = 'snow-wind';
84            break;
85
86        case 16:
87            $weatherIcon = 'snow';
88            break;
89
90        case 17:
91            $weatherIcon = 'hail';
92            break;
93
94        case 18:
95            $weatherIcon = 'sleet';
96            break;
97
98        case 19:
99            $weatherIcon = 'dust';
100            break;
101
102        case 20:
103            $weatherIcon = 'fog';
104            break;
105
106        case 21:
107            $weatherIcon = 'day-haze';
108            break;
109
110        case 22:
111            $weatherIcon = 'smoke';
112            break;
113
114        case 23:
115            $weatherIcon = 'windy';
116            break;
117
118        case 24:
119            $weatherIcon = 'windy';
120            break;
121
122        case 25:
123            $weatherIcon = 'snowflake-cold';
124            break;
125
126        case 26:
127            $weatherIcon = 'cloudy';
128            break;
129
130        case 27:
131            $weatherIcon = 'night-cloudy';
132            break;
133
134        case 28:
135            $weatherIcon = 'day-cloudy';
136            break;
137
138        case 29:
139            $weatherIcon = 'night-partly-cloudy';
140            break;
141
142        case 30:
143            $weatherIcon = 'day-cloudy-high';
144            break;
145
146        case 31:
147            $weatherIcon = 'night-clear';
148            break;
149
150        case 32:
151            $weatherIcon = 'day-sunny';
152            break;
153
154        case 33:
155            $weatherIcon = 'stars';
156            break;
157
158        case 34:
159            $weatherIcon = 'day-sunny';
160            break;
161
162        case 35:
163            $weatherIcon = 'rain-mix';
164            break;
165
166        case 36:
167            $weatherIcon = 'hot';
168            break;
169
170        case 37:
171            $weatherIcon = 'thunderstorm';
172            break;
173
174        case 38:
175            $weatherIcon = 'thunderstorm';
176            break;
177
178        case 39:
179            $weatherIcon = 'thunderstorm';
180            break;
181
182        case 40:
183            $weatherIcon = 'sprinkle';
184            break;
185
186        case 41:
187            $weatherIcon = 'snowflake-cold';
188            break;
189
190        case 42:
191            $weatherIcon = 'snow';
192            break;
193
194        case 43:
195            $weatherIcon = 'snowflake-cold';
196            break;
197
198        case 44:
199            $weatherIcon = 'day-cloudy';
200            break;
201
202        case 45:
203            $weatherIcon = 'thunderstorm';
204            break;
205
206        case 46:
207            $weatherIcon = 'snow';
208            break;
209
210        case 47:
211            $weatherIcon = 'storm-showers';
212            break;
213
214        case 3200:
215            $weatherIcon = 'thermometer-exterior';
216            break;
217
218        default:
219            $weatherIcon = 'thermometer-exterior';
220    }
221    return 'wi-' + $weatherIcon;
222}
223
224function fnLoadWeather() {
225    $.ajax ({
226        type: 'GET',
227        url: param.domain + '/api/v1/weather/woeid/' + param.woeid + '/' + param.unitID,
228        contentType: 'application/json; charset=utf-8',
229        dataType: 'json',
230        beforeSend: function (xhr) {
231            xhr.setRequestHeader('App-Id', btoa(param.appID));
232            xhr.setRequestHeader('Consumer-Key', btoa(param.consumerKey));
233            xhr.setRequestHeader('Consumer-Secret', btoa(param.consumerSecret));
234            xhr.setRequestHeader('AllNet-ApiKey', btoa(param.appID + param.consumerKey + param.consumerSecret));
235        },
236        success: function (data) {
237            console.log(data);
238
239            var $weatherIcon = fnWeatherIcons(data.current_observation.condition.code);
240
241            // Weather display on the header
242            var $btnHeaderYahooWeather = '';
243
244            $btnHeaderYahooWeather += '<h2 class="hideMe">Weather Forecast</h2>';
245            $btnHeaderYahooWeather += '<span><i class="wi ' + $weatherIcon + '"></i>' + data.current_observation.condition.temperature + '<i class="wi wi-celsius"></i></span>';
246
247            // Weather display on the modal
248            var $modalYahooWeather = '';
249
250            $modalYahooWeather = '<h2 class="hideMe">Weather Forecast</h2>';
251
252            $modalYahooWeather += '<div class="headerWeatherCont">';
253                $modalYahooWeather += '<div class="headerWeather ' + $weatherIcon + '">';
254                    $modalYahooWeather += '<p class="weatherText"><i class="wi ' + $weatherIcon + '"></i></p>';
255                    $modalYahooWeather += '<p class="weatherText">' + data.current_observation.condition.text + '</p>';
256                    $modalYahooWeather += '<p class="weatherCity">' + data.location.city + ', ' + data.location.region + '</p>';
257                    $modalYahooWeather += '<p class="weatherTemp">' + data.current_observation.condition.temperature + '<i class="wi wi-celsius"></i></p>';
258                $modalYahooWeather += '</div >';
259            $modalYahooWeather += '</div >';
260
261            $modalYahooWeather += '<div class="bodyWeather">';
262                $modalYahooWeather += '<ul class="nav nav-tabs bwTabs cf" role="tablist">';
263                    $modalYahooWeather += '<li role="presentation"><a  class="active" href="#forecast" data-toggle="tab" role="tab" aria-controls="forecast" title="Forecast"><i class="fal fa-sun"></i>Forecasts</a></li>';
264                    $modalYahooWeather += '<li role="presentation"><a href="#details" data-toggle="tab" role="tab" aria-controls="details" title="Details"><i class="fal fa-info-square"></i>Details</a></li>';
265                $modalYahooWeather += '</ul>';
266
267                $modalYahooWeather += '<div class="tab-content">';
268                    $modalYahooWeather += '<div role="tabpanel" class="tab-pane in active" id="forecast">';
269                        $modalYahooWeather += '<ul class="weatherListsHeader cf">';
270                            $modalYahooWeather += '<li><span class="wlHead">Day</span></li>';
271                            $modalYahooWeather += '<li><span class="wlHead">Weather</span></li>';
272                            $modalYahooWeather += '<li><span class="wlHead">High / Low</span></li>';
273                        $modalYahooWeather += '</ul>';
274
275                        $modalYahooWeather += '<div class="bodyContainer">';
276                        for (var i = 0; i < data.forecasts.length; i++) {
277                            var $weatheCode = data.forecasts[i].code,
278                                $weatherIcon = fnWeatherIcons($weatheCode);
279
280                            $modalYahooWeather += '<div class="weatherList">';
281                                $modalYahooWeather += '<ul class="innerColWeatherLists cf">';
282                                    $modalYahooWeather += '<li><span class="wlDay">' + data.forecasts[i].day + '</span></li>';
283                                    $modalYahooWeather += '<li><span class="wlIcon"><i class="wi ' + $weatherIcon + '"></i></span></li>';
284                                    $modalYahooWeather += '<li><span class="wlHigh">' + data.forecasts[i].high + '<i class="wi wi-celsius"></i></span><span class="wlLow"> / ' + data.forecasts[i].low + '<i class="wi wi-celsius"></i></span><span class="wlText">' + data.forecasts[i].text + '</span></li>';
285                                $modalYahooWeather += '</ul>';
286                            $modalYahooWeather += '</div>'; // weatherList
287                        }
288                        $modalYahooWeather += '</div>'; // bodyContainer
289                    $modalYahooWeather += '</div>'; // #forecast
290
291                    $modalYahooWeather += '<div role="tabpanel" class="tab-pane fade" id="details">';
292                        $modalYahooWeather += '<div class="bodyContainer">';
293                            $modalYahooWeather += '<ul class="col2W cf">';
294                                $modalYahooWeather += '<li><span class="col2WTitle">Feels Like</span><span class="col2WDesc"><i class="wi wi-thermometer"></i>' + data.current_observation.wind.chill + '<i class="wi wi-celsius"></i></span></li>';
295            $modalYahooWeather += '<li><span class="col2WTitle">Wind Direction</span><span class="col2WDesc"><i class="wi wi-strong-wind"></i><span class="wd"></span></span></li>';
296                                $modalYahooWeather += '<li><span class="col2WTitle">Sunrise</span><span class="col2WDesc"><i class="wi wi-sunrise"></i>' + data.current_observation.astronomy.sunrise + '</span></li>';
297                                $modalYahooWeather += '<li><span class="col2WTitle">Sunset</span><span class="col2WDesc"><i class="wi wi-sunset"></i>' + data.current_observation.astronomy.sunset + '</span></li>';
298                                $modalYahooWeather += '<li><span class="col2WTitle">Humidity</span><span class="col2WDesc"><i class="wi wi-humidity"></i>' + data.current_observation.atmosphere.humidity + '%</span></li>';
299                                $modalYahooWeather += '<li><span class="col2WTitle">Visibility</span><span class="col2WDesc"><i class="wi wi-small-craft-advisory"></i>' + data.current_observation.atmosphere.visibility + ' km</span></li>';
300                            $modalYahooWeather += '</ul>'; // ul.col2
301                        $modalYahooWeather += '</div>'; // bodyContainer 
302                    $modalYahooWeather += '</div>'; // #details
303
304                $modalYahooWeather += '</div>'; // tab-content
305            $modalYahooWeather += '</div >'; // bodyWeather
306
307            // Displays the Yahoo Weather
308            // Display weather on the header
309            $('#btnHeaderYahooWeather').html($btnHeaderYahooWeather);
310            // Displays weather on the modal
311            $('#weatherYahooCont').html($modalYahooWeather);
312

313            // Wind Direction
314            var deg = data.current_observation.wind.direction;
315            if (deg > 11.25 && deg < 33.75) {
316                $('.wd').html('NNE');
317            } else if (deg > 33.75 && deg < 56.25) {
318                $('.wd').html('ENE');
319            } else if (deg > 56.25 && deg < 78.75) {
320                $('.wd').html('E');
321            } else if (deg > 78.75 && deg < 101.25) {
322                $('.wd').html('ESE');
323            } else if (deg > 101.25 && deg < 123.75) {
324                $('.wd').html('ESE');
325            } else if (deg > 123.75 && deg < 146.25) {
326                $('.wd').html('SE');
327            } else if (deg > 146.25 && deg < 168.75) {
328                $('.wd').html('SSE');
329            } else if (deg > 168.75 && deg < 191.25) {
330                $('.wd').html('S');
331            } else if (deg > 191.25 && deg < 213.75) {
332                $('.wd').html('SSW');
333            } else if (deg > 213.75 && deg < 236.25) {
334                $('.wd').html('SW');
335            } else if (deg > 236.25 && deg < 258.75) {
336                $('.wd').html('WSW');
337            } else if (deg > 258.75 && deg < 281.25) {
338                $('.wd').html('W');
339            } else if (deg > 281.25 && deg < 303.75) {
340                $('.wd').html('WNW');
341            } else if (deg > 303.75 && deg < 326.25) {
342                $('.wd').html('NW');
343            } else if (deg > 326.25 && deg < 348.75) {
344                $('.wd').html('NNW');
345            } else {
346                $('.wd').html('N');
347            }
348        }
349    });
350}
351
352$(function () {
353    'use strict';
354
355    fnLoadWeather();
356});