-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathscript.js
154 lines (139 loc) · 6.05 KB
/
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
148
149
150
151
152
153
154
$(document).ready(function () {
// VARIABLES
var authKey = "7558419d9a99d2be3b1975a5ecc02218";
var currentDay = moment().format("LL");
var citySearch = "";
//LOCAL STORAGE
var location = JSON.parse(localStorage.getItem("location")) || [];
for (var i = 0; i < location.length; i++) {
createButton(location[i]);
}
//DYNAMICALLY CREATE BUTTONS BASED ON SEARCH
function createButton(citySearch) {
var newButton = $("<button>");
newButton.addClass("btn btn-secondary");
newButton.attr("type", "button");
newButton.html(citySearch);
$("#btn-group").prepend(newButton);
newButton.on("click", function () {
citySearch = newButton.html();
newCurrentWeather = `https://api.openweathermap.org/data/2.5/weather?q=${citySearch}&appid=${authKey}`;
runCurrentQuery(newCurrentWeather);
$(".card").removeClass("hide");
$(".future-forecast").removeClass("hide");
});
}
//RUN THIS FUNCTION TO PULL DATA FROM API'S
function runCurrentQuery(queryURL) {
$.ajax({
url: queryURL,
method: "GET",
}).then(function (response) {
var city = response.name;
var temp = response.main.temp;
temp = Math.round((temp - 273.15) * (9 / 5) + 32);
var humidity = response.main.humidity;
var windSpeed = parseInt(response.wind.speed);
windSpeed = (windSpeed * 2.237).toFixed(1);
console.log(windSpeed);
var icon = response.weather[0].icon;
var description = response.weather[0].description;
var lat = response.coord.lat;
var lon = response.coord.lon;
var queryTwo = `https://api.openweathermap.org/data/2.5/onecall?lat=${lat}&lon=${lon}&appid=${authKey}`;
$(".weather").html(
"Conditions: " +
response.weather[0].description +
" <img src='https://openweathermap.org/img/w/" +
response.weather[0].icon +
".png'>"
);
//One Call API
$.ajax({
url: queryTwo,
method: "GET",
}).then(function (responseTwo) {
var uvi = parseInt(responseTwo.current.uvi);
$("#card").removeClass(".hide");
$(".city-name").text(city);
$(".description").text("Currently: " + description);
$("#weather-icon").html("<img id='main-weather-icon' src='https://openweathermap.org/img/w/" + icon + ".png'>");
$(".card-title").html(currentDay);
$(".temperature").html(temp + "℉");
$(".humidity").html("Humidity: " + humidity + "%");
$(".wind").html("Wind Speed: " + windSpeed + " mph");
$(".uvIndex").html("UV Index: " + uvi);
function uvColorChange() {
if (uvi < 3) {
$(".uvIndex").css("color", "#66b447");
} else if (uvi < 6) {
$(".uvIndex").css("color", "#ffd300");
} else if (uvi < 9) {
$(".uvIndex").css("color", "#ff631c");
} else {
$(".uvIndex").css("color", "#ff0800");
}
}
uvColorChange();
//FUTURE FORECAST DATA
//Icons
var dayOneIcon = responseTwo.daily[0].weather[0].icon;
$("#dayOneIcon").html(
"<img src='https://openweathermap.org/img/w/" + dayOneIcon + ".png'>"
);
var dayTwoIcon = responseTwo.daily[1].weather[0].icon;
$("#dayTwoIcon").html(
"<img src='https://openweathermap.org/img/w/" + dayTwoIcon + ".png'>"
);
var dayThreeIcon = responseTwo.daily[2].weather[0].icon;
$("#dayThreeIcon").html(
"<img src='https://openweathermap.org/img/w/" + dayThreeIcon + ".png'>"
);
var dayFourIcon = responseTwo.daily[3].weather[0].icon;
$("#dayFourIcon").html(
"<img src='https://openweathermap.org/img/w/" + dayFourIcon + ".png'>"
);
var dayFiveIcon = responseTwo.daily[4].weather[0].icon;
$("#dayFiveIcon").html(
"<img src='https://openweathermap.org/img/w/" + dayFiveIcon + ".png'>"
);
//Temperatures
var dayOneTemp = parseInt(responseTwo.daily[0].temp.day);
$("#dayOneTemp").html(Math.round((dayOneTemp - 273.15) * (9 / 5) + 32) + "℉");
var dayTwoTemp = parseInt(responseTwo.daily[1].temp.day);
$("#dayTwoTemp").html(Math.round((dayTwoTemp - 273.15) * (9 / 5) + 32) + "℉");
var dayThreeTemp = parseInt(responseTwo.daily[2].temp.day);
$("#dayThreeTemp").html(Math.round((dayThreeTemp - 273.15) * (9 / 5) + 32) + "℉");
var dayFourTemp = parseInt(responseTwo.daily[3].temp.day);
$("#dayFourTemp").html(Math.round((dayFourTemp - 273.15) * (9 / 5) + 32) + "℉");
var dayFiveTemp = parseInt(responseTwo.daily[4].temp.day);
$("#dayFiveTemp").html(Math.round((dayFiveTemp - 273.15) * (9 / 5) + 32) + "℉");
//Humidity
$("#dayOneH").html(responseTwo.daily[0].humidity + "%" + " " + "Humidity");
$("#dayTwoH").html(responseTwo.daily[1].humidity + "%" + " " + "Humidity");
$("#dayThreeH").html(responseTwo.daily[2].humidity + "%" + " " + "Humidity");
$("#dayFourH").html(responseTwo.daily[3].humidity + "%" + " " + "Humidity");
$("#dayFiveH").html(responseTwo.daily[4].humidity + "%" + " " + "Humidity");
//Date
$("#dayOneDate").html(moment().add(1, "days").format("ddd D"));
$("#dayTwoDate").html(moment().add(2, "days").format("ddd D"));
$("#dayThreeDate").html(moment().add(3, "days").format("ddd D"));
$("#dayFourDate").html(moment().add(4, "days").format("ddd D"));
$("#dayFiveDate").html(moment().add(5, "days").format("ddd D"));
});
});
}
//SEARCH BUTTON ON CLICK
$("#searchBtn").on("click", function () {
citySearch = $("#search").val().trim();
var newCurrentWeather = `https://api.openweathermap.org/data/2.5/weather?q=${citySearch}&appid=${authKey}`;
runCurrentQuery(newCurrentWeather);
$(".card").removeClass("hide");
$(".future-forecast").removeClass("hide");
if (location.indexOf(citySearch) === -1) {
location.push(citySearch);
localStorage.setItem("location", JSON.stringify(location));
createButton(citySearch);
}
});
});