-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
85 lines (64 loc) · 3.09 KB
/
main.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
const weatherApi = {
key: "ac8c5be4aba9f7b605df7a40aeed842b",
baseUrl: "https://api.openweathermap.org/data/2.5/weather"
}
// ac8c5be4aba9f7b605df7a40aeed842b
// https://api.openweathermap.org/data/2.5/weather?q={city name}&appid={API key}
// https://api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={API key}
// Event Listener Function on Keypress
const searchInputBox = document.getElementById("input-box")
searchInputBox.addEventListener("keypress", (event) => {
if (event.keyCode == 13) {
console.log(searchInputBox.value);
getWeatherReport(searchInputBox.value)
}
});
// Get Weather Report
function getWeatherReport(city){
fetch(`${weatherApi.baseUrl}?q=${city}&appid=${weatherApi.key}&units=metric`).then(weather =>{
return weather.json();
}).then(showWeatherReport);
}
// Show Weather Report
function showWeatherReport(weather){
console.log(weather)
let city = document.getElementById("city");
city.innerText = `${weather.name},${weather.sys.country}`;
let temperature = document.getElementById("temp");
temperature.innerHTML = `${Math.round(weather.main.temp)}°C`;
let minMaxTemp = document.getElementById ("min-max");
minMaxTemp.innerHTML = `${Math.floor(weather.main.temp_min)}°C (min)/ ${Math.ceil(weather.main.temp_max)}°C (max)`;
let weatherType = document.getElementById("weather");
weatherType.innerText = `${weather.weather[0].main}`;
let date = document.getElementById("date");
let todayDate = new Date ();
date.innerText = dateManage(todayDate);
if(weatherType.textContent == "Clear"){
document.body.style.backgroundImage = "url('images/clear.jpg')";
}
else if(weatherType.textContent == "Clouds"){
document.body.style.backgroundImage = "url('images/cloud.jpg')";
}else if(weatherType.textContent == "Rain"){
document.body.style.backgroundImage = "url('images/rain.jpg')";
}else if(weatherType.textContent == "Snow"){
document.body.style.backgroundImage = "url('images/snow.jpg')";
}else if(weatherType.textContent == "Sunny"){
document.body.style.backgroundImage = "url('images/sunny.jpg')";
}else if(weatherType.textContent == "Thunderstorm"){
document.body.style.backgroundImage = "url('images/thunderstorm.jpg')";
}else if(weatherType.textContent == "Smoke"){
document.body.style.backgroundImage = "url('images/smoke.jpg')";
}else if(weatherType.textContent == "Haze"){
document.body.style.backgroundImage = "url('images/haze.jpg')";
}
}
// Date manage
function dateManage(dateArg){
let days = ["Sunday","Monday","Tuesday", "Wednesday","Thursday", "Friday", "Saturday"]
let months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
let year = dateArg.getFullYear();
let month = months[dateArg.getMonth()];
let date = dateArg.getDate();
let day = days[dateArg.getDay()];
return `${date} ${month} (${day}) ${year}`
}