/
weather_script.js
147 lines (134 loc) · 4.83 KB
/
weather_script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
$(function() {
var getTheWeather = function(city) {
// get weather in any city
var encodedCity = encodeURI(city);
$.ajax('http://api.wunderground.com/api/0aea82cb2d20d5dc/conditions/q/'+ encodedCity +'.json', {
type : 'GET',
dataType : 'jsonp',
success : function(data) {
console.log(data);
// if user doesn't enter in both city and province/state
if (!data.current_observation) {
$('h1.error').text('Please be more specific');
return false;
$('.weather').remove();
}
var w = data.current_observation;
var forecast = w.weather;
var location = w.display_location.full;
var temp = w.temp_c;
var tempRounded = Math.round(temp);
var feelsLike = w.feelslike_c;
var feelsRounded = Math.round(feelsLike);
var windDirection = w.wind_dir;
var windSpeed = w.wind_kph;
var windGust = w.wind_gust_kph;
var humidity = w.relative_humidity;
var precipitation = w.precip_today_metric;
var weathericon = w.icon_url;
var icon = w.icon;
if (!!data.current_observation) {
$('.holder').text('°C');
console.log("it works");
if (forecast === "Chance of Flurries") {
$('.imageholder').html('<img src="icons/chanceofflurries.svg">');
}
else if (forecast === "Chance of Rain") {
$('.imageholder').html('<img src="icons/chanceofrain.svg">');
}
else if (forecast === "Chance Rain") {
$('.imageholder').html('<img src="icons/chanceofrain.svg">');
}
else if (forecast === "Chance of Freezing Rain") {
$('.imageholder').html('<img src="icons/freezingrain.svg">');
}
else if (forecast === "Chance of Sleet") {
$('.imageholder').html('<img src="icons/freezingrain.svg">');
}
else if (forecast === "Chance of Snow") {
$('.imageholder').html('<img src="icons/chanceoffluries.svg">');
}
else if (forecast === "Chance of Thunderstorms") {
$('.imageholder').html('<img src="icons/chanceofthunderstorms.svg">');
}
else if (forecast === "Chance of a Thunderstorm") {
$('.imageholder').html('<img src="icons/chanceofthunderstorms.svg">');
}
else if (forecast === "Clear") {
$('.imageholder').html('<img src="icons/sunny.svg">');
}
else if (forecast === "Cloudy") {
$('.imageholder').html('<img src="icons/cloudy.svg">');
}
else if (forecast === "Flurries") {
$('.imageholder').html('<img src="icons/flurries.svg">');
}
else if (forecast === "Fog") {
$('.imageholder').html('<img src="icons/fog.svg">');
}
else if (forecast === "Haze") {
$('.imageholder').html('<img src="icons/fog.svg">');
}
else if (forecast === "Mostly Cloudy") {
$('.imageholder').html('<img src="icons/cloudy.svg">');
}
else if (forecast === "Mostly Sunny") {
$('.imageholder').html('<img src="icons/clear.svg">');
}
else if (forecast === "Partly Cloudy") {
$('.imageholder').html('<img src="icons/partlycloudy.svg">');
}
else if (forecast === "Partly Sunny") {
$('.imageholder').html('<img src="icons/partlycloudy.svg">');
}
else if (forecast === "Freezing Rain") {
$('.imageholder').html('<img src="freezingrain.svg">');
}
else if (forecast === "Rain") {
$('.imageholder').html('<img src="rain.svg">');
}
else if (forecast === "Sleet") {
$('.imageholder').html('<img src="icons/freezingrain.svg">');
}
else if (forecast === "Snow") {
$('.imageholder').html('<img src="icons/flurries.svg">');
}
else if (forecast === "Sunny") {
$('.imageholder').html('<img src="icons/sunny.svg">');
}
else if (forecast === "Thunderstorms") {
$('.imageholder').html('<img src="icons/thunderstorm.svg">');
}
else if (forecast === "Thunderstorm") {
$('.imageholder').html('<img src="icons/thunderstorm.svg">');
}
else if (forecast === "Unknown") {
$('.imageholder').html('<img src="icons/unknown.svg">');
}
else if (forecast === "Overcast") {
$('.imageholder').html('<img src="icons/overcast.svg">');
}
else if (forecast === "Scattered Clouds") {
$('.imageholder').html('<img src="icons/cloudy.svg">');
}
}
// dump string into the divs
$('.forecastLocation').text(forecast + ' in ' + location);
$('.temp').text(tempRounded);
$('.feelsLike').text('Feels like ' + feelsRounded +'°C');
$('.wds').text('Wind: '+ windDirection + ' ' + windSpeed + ' km/h');
$('.wg').text('Wind Gust: ' + windGust);
$('.h').text('Humidity: ' + humidity);
}
}); // end ajax
}; // end getTheWeather
// run the function in the form
$('form.weatherForm').on('submit', function(e){
e.preventDefault();
// grabbing the city value from the input in body
var city = $('input[name="city"]').val();
getTheWeather(city);
$('h1.error').text('')
$('.weather').addClass('show');
}); // end form
});