-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathscript.js
More file actions
115 lines (100 loc) · 3.76 KB
/
script.js
File metadata and controls
115 lines (100 loc) · 3.76 KB
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
let loc = document.getElementById("location");
let tempicon = document.getElementById("temp-icon");
let tempvalue = document.getElementById("temp-value");
let climate = document.getElementById("climate");
let iconfile;
const searchInput = document.getElementById("search-input");
const searchButton = document.getElementById("search-button");
const main = document.querySelector("main");
main.addEventListener("mousemove", (e) => {
const mouseX = e.clientX;
const mouseY = e.clientY;
const mainRect = main.getBoundingClientRect();
const centerX = mainRect.left + mainRect.width / 2;
const centerY = mainRect.top + mainRect.height / 2;
const deltaX = (mouseX - centerX) / (mainRect.width / 2);
const deltaY = (mouseY - centerY) / (mainRect.height / 2);
main.style.setProperty(
"transform",
`perspective(1000px) rotateX(${deltaY * 10}deg) rotateY(${deltaX * -10}deg)`
);
main.style.transition = "transform 0.09s ease-out";
});
main.addEventListener("mouseleave", (e) => {
main.style.removeProperty("transform");
main.style.transition = "transform 0.4s ease-out";
});
searchButton.addEventListener("click", (e) => {
e.preventDefault();
getWeather(searchInput.value);
searchInput.value = "";
});
const getWeather = async (city) => {
try {
const response = await fetch(
`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=cc5d2c65aa1183f3d4066870fdca0b7d`,
{ mode: "cors" }
);
const weatherData = await response.json();
console.log(weatherData);
const { name } = weatherData;
const { feels_like } = weatherData.main;
const { id, main } = weatherData.weather[0];
loc.textContent = name;
climate.textContent = main;
tempvalue.textContent = Math.round(feels_like - 273);
// if (id < 300 && id > 200) {
// tempicon.src = "./icons/thunderstorm.svg";
// } else if (id < 400 && id > 300) {
// tempicon.src = "./icons/cloud-solid.svg";
// } else if (id < 600 && id > 500) {
// tempicon.src = "./icons/rain.svg";
// } else if (id < 700 && id > 600) {
// tempicon.src = "./icons/snow.svg";
// } else if (id < 800 && id > 700) {
// tempicon.src = "./icons/clouds.svg";
// } else if (id == 800) {
// tempicon.src = "./icons/clouds-and-sun.svg";
// }
} catch (error) {
alert("city not found");
}
};
window.addEventListener("load", () => {
let long;
let lat;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) => {
long = position.coords.longitude;
lat = position.coords.latitude;
const proxy = "https://cors-anywhere.herokuapp.com/";
const api = `${proxy}api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${long}&appid=dab3af44de7d24ae7ff86549334e45bd `;
fetch(api)
.then((response) => {
return response.json();
})
.then((data) => {
const { name } = data;
const { feels_like } = data.main;
const { id, main } = data.weather[0];
loc.textContent = name;
climate.textContent = main;
tempvalue.textContent = Math.round(feels_like - 273);
// if (id < 300 && id > 200) {
// tempicon.src = "./icons/thunderstorm.svg";
// } else if (id < 400 && id > 300) {
// tempicon.src = "./icons/cloud-solid.svg";
// } else if (id < 600 && id > 500) {
// tempicon.src = "./icons/rain.svg";
// } else if (id < 700 && id > 600) {
// tempicon.src = "./icons/snow.svg";
// } else if (id < 800 && id > 700) {
// tempicon.src = "./icons/cloud.svg";
// } else if (id == 800) {
// tempicon.src = "./icons/clouds-and-sun.svg";
// }
console.log(data);
});
});
}
});