Weather-App/script.js at main · Trapti10/Weather-App · 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
59
60

const apiKey = "16e677c9ff1aa32907f5ec3d42650e69";
const apiUrl = "https://api.openweathermap.org/data/2.5/weather?units=metric&q=";

const searchBox = document.querySelector(".search input");
const searchBtn = document.querySelector(".search button");
const weatherIcon  = document.querySelector(".weather-icon");

async function checkWeather(city) {
    const response = await fetch(apiUrl + city + `&appid=${apiKey}`);

    if(response.status == 404){
        document.querySelector(".error").style.display = "block";
        document.querySelector(".weather").style.display = "none";
    }
    else{

        var data =await response.json();


    document.querySelector(".city").innerHTML = data.name;
    document.querySelector(".temp").innerHTML = Math.round(data.main.temp) + "°c";  // to make the temp value integer
    // These are from the json file in which city is given inside main as name, temperature is given as temp
    document.querySelector(".humidity").innerHTML = data.main.humidity + "%";
    document.querySelector(".wind").innerHTML = data.wind.speed + " km/h";
    // Change background based on weather
if (data.weather[0].main == "Clouds") {
    weatherIcon.src = "images/clouds.png";
    document.body.className = "clouds";
} else if (data.weather[0].main == "Clear") {
    weatherIcon.src = "images/clear.png";
    document.body.className = "clear";
} else if (data.weather[0].main == "Rain") {
    weatherIcon.src = "images/rain.png";
    document.body.className = "rain";
} else if (data.weather[0].main == "Drizzle") {
    weatherIcon.src = "images/drizzle.png";
    document.body.className = "drizzle";
} else if (data.weather[0].main == "Mist") {
    weatherIcon.src = "images/mist.png";
    document.body.className = "mist";
}


    document.querySelector(".weather").style.display = "block";
    document.querySelector(".error").style.display = "none";


}
}
searchBtn.addEventListener("click", ()=>{

    checkWeather(searchBox.value);
})

searchBox.addEventListener("keydown", (e)=>{
    if(e.key === "Enter"){
        checkWeather(searchBox.value);
    }
});