Weather-App/script.js at main · piyusha-chopra/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
61
62
const cityName=document.querySelector(".cityName") ;
const getWeather=document.querySelector(".getWeather");
const weatherImg=document.querySelector(".weather-img");
const temperature=document.querySelector(".temperature");
const weatherType=document.querySelector(".weather-type");
const humidity=document.querySelector(".humidity-value");
const windSpeed=document.querySelector(".wind-speed");
const locationNotFound=document.querySelector(".location-not-found");
const weatherDetails=document.querySelector(".weather-details");


async function checkWeather(city){
    const api_key= "4d75ed907790c9c7b9847a243c03b4d3";
    const url=`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${api_key}`;

    const weather_data= await fetch(`${url}`).then(response=>response.json());

    if(weather_data.cod=="404"){
        locationNotFound.style.display="flex";
        weatherDetails.style.display="none";
        return
    }
    locationNotFound.style.display="none";
    weatherDetails.style.display="flex";

    temperature.innerHTML=`${Math.round(weather_data.main.temp-273.15)}<sup>°C</sup>`;
    weatherType.innerHTML=`${weather_data.weather[0].description}`;
    humidity.innerHTML=`${weather_data.main.humidity}%`;
    windSpeed.innerHTML=`${weather_data.wind.speed}Km/hr`;

    switch(weather_data.weather[0].main){
        case 'Clouds':
            weatherImg.src="assets/clouds.png";
            break;
        case 'Clear':
            weatherImg.src="assets/clear-sky.png";
            break;
        case 'Fog':
        case 'Mist':
            weatherImg.src="assets/fog.png";
            break;
        case 'Rain':
            weatherImg.src="assets/heavy-rain.png";
            break;
        case 'Snow':
            weatherImg.src="assets/snow.png";
            break;
        case 'Haze':
            weatherImg.src="assets/haze.png";
            break;
        case 'Smoke':
            weatherImg.src="assets/smoke.png"

    }
}
getWeather.addEventListener('click',()=>{
    const city=cityName.value.trim();
    if(!city){
        return;
    }
    checkWeather(cityName.value);
})