12/1/24, 6:30 PM app.
js
1 const apiKey = "790a086c68e03883d64b5a065f1e9232";
2 const searchBtn = document.getElementById("search-btn");
3 const cityNameInput = document.getElementById("city-name");
4
5 const cityElem = document.getElementById("city");
6 const descriptionElem = document.getElementById("description");
7 const tempElem = document.getElementById("temp");
8 const humidityElem = document.getElementById("humidity");
9 const windSpeedElem = document.getElementById("wind-speed");
10 const pressureElem = document.getElementById("pressure");
11
12 searchBtn.addEventListener("click", function() {
13 const city = cityNameInput.value;
14 if (city) {
15 getWeather(city);
16 }
17 });
18
19 async function getWeather(city) {
20 const url = `https://api.openweathermap.org/data/2.5/weather?
q=${city}&appid=${apiKey}&units=metric`;
21
22 try {
23 const response = await fetch(url);
24 const data = await response.json();
25
26 if (data.cod === "404") {
27 alert("City not found. Please try again.");
28 return;
29 }
30
31 const { name, weather, main, wind } = data;
32 cityElem.textContent = name;
33 descriptionElem.textContent = weather[0].description;
34 tempElem.textContent = `Temperature: ${main.temp}°C`;
35 humidityElem.textContent = `Humidity: ${main.humidity}%`;
36 windSpeedElem.textContent = `Wind Speed: ${wind.speed} m/s`;
37 pressureElem.textContent = `Pressure: ${main.pressure} hPa`;
38 } catch (error) {
39 alert("An error occurred while fetching weather data.");
40 }
41 }
42
localhost:4649/?mode=javascript 1/1
