weatherapp/script.js at master · HM-Webcoding/weatherapp · GitHub

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
const apiKey = "167eb15305036c5927073f6010c040ca";
const apiUrl =
  "https://api.openweathermap.org/data/2.5/weather?units=metric&q=";

const inputValue = document.querySelector(".input_value");
const searchBtn = document.querySelector(".search_btn");
const weather = document.querySelector(".weather");
const weatherIcon = document.querySelector(".weather_icon");
const error = document.querySelector(".error");
const message = document.querySelector(".message");

const checkWeather = async (city) => {
  const response = await fetch(apiUrl + city + `&appid=${apiKey}`);
  let data = await response.json();
  console.log(data);

  // city name validation

  if (inputValue.value == "") {
    weather.style.display = "none";
    error.style.display = "block";
  } else if (response.status == 404) {
    weather.style.display = "none";
    error.style.display = "block";
  } else {
    error.style.display = "none";
    weather.style.display = "block";
  }
  // update weather value
  document.querySelector(".temp").innerHTML = Math.round(data.main.temp) + "°C";
  document.querySelector(".city_name").innerHTML = data.name;
  document.querySelector(".humidity").innerHTML =
    Math.round(data.main.humidity) + "%";
  document.querySelector(".wind").innerHTML =
    Math.round(data.wind.speed) + "km/h";

  // weather config message and image
  if (data.weather[0].main == "Clouds") {
    weatherIcon.src = "images/clouds.png";
    message.innerHTML = "The weather is Clouds ";
  } else if (data.weather[0].main == "rain") {
    weatherIcon.src = "images/rain.png";
    message.innerHTML = "The weather is Rainy ";
  } else if (data.weather[0].main == "snow") {
    weatherIcon.src = "images/snow.png";
    message.innerHTML = "The weather is Snow ";
  } else if (data.weather[0].main == "mist") {
    weatherIcon.src = "images/snow.png";
    message.innerHTML = "The weather is Mist ";
  } else if (data.weather[0].main == "drizzle") {
    weatherIcon.src = "images/snow.png";
    message.innerHTML = "The weather is Drizzle ";
  }
};

searchBtn.addEventListener("click", () => {
  checkWeather(inputValue.value);
});