-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
67 lines (59 loc) · 2.67 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
let weather = {
"apiKey": "fb7e2ac7e50f95f5164e18a577fd0769",
fetchWeather: function(city) {
fetch(
"https://api.openweathermap.org/data/2.5/weather?q=" + city + "&units=imperial&appid=" + this.apiKey
)
.then((response) => response.json())
.then((data) => this.displayWeather(data));
},
displayWeather: function(data) {
const { name } = data
const { icon, description } = data.weather[0];
const { temp, humidity } = data.main;
const { speed } = data.wind;
const { sunrise, sunset } = data.sys;
document.querySelector(".city").innerText = name;
document.querySelector(".icon").src = "https://openweathermap.org/img/wn/" + icon + "@2x.png";
document.querySelector(".description").innerText = description;
document.querySelector(".temp").innerText = Math.round(temp) + "° F";
document.querySelector(".humidity").innerText = `Humidity: ${humidity}%`;
document.querySelector(".wind").innerText = `Wind speed of: ${speed} mph`;
//block for converting unix timestamp to UTC for SUNRISE
function getSunrise() {
let unixTimestamp = sunrise
let date = new Date(unixTimestamp * 1000);
let hours = date.getHours();
let minutes = "0" + date.getMinutes();
let formatTimeSunrise = `${hours}:${minutes - 2}`;
document.querySelector(".sunrise").innerText = `Sunrise: ${formatTimeSunrise} AM`
}
getSunrise();
//block for converting unix timestamp to UTC for SUNSET
function getSunset() {
let unixTimestamp = sunset
let date = new Date(unixTimestamp * 1000);
let hours = date.getHours();
let minutes = "0" + date.getMinutes();
let formatTimeSunset = `${hours}:${minutes - 2}`;
document.querySelector(".sunset").innerText = `Sunset: ${formatTimeSunset} PM`
}
getSunset();
document.querySelector(".weather").classList.remove("loading");
document.body.style.backgroundImage = "url('https://source.unsplash.com/1600x900/?" + name + "')"
},
search: function() {
this.fetchWeather(document.querySelector(".search-bar").value);
}
};
document.querySelector(".input-btn").addEventListener("click", function() {
weather.search();
})
document.querySelector(".search-bar").addEventListener("keyup", function(event) {
if (event.key == "Enter") {
weather.search();
}
});
document.querySelector(".search-bar").addEventListener("click", function() {
document.querySelector(".search-bar").value = ""
});