Weather-App/script.js at main · 4pruthvi/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
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
const inputSearch = document.querySelector('.input-search')
const searchButton = document.querySelector('.searchBtn')
const weatherImg = document.getElementById('weather-img')
const temperature = document.querySelector('.temperature')
const discription = document.querySelector('.discription')
const humidity = document.getElementById('humidity-detail')
const wind = document.getElementById('wind-detail')

const location_not_found = document.querySelector('.location-not-found')

const weather_body = document.querySelector('.weather-body')

async function WeatherUpdate(city) {
    const api_key = 'f397a2a26d152143437bd3c62e9279aa';
    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") {
        // alert("Location not found!");

        weather_body.style.display = "none";

        location_not_found.style.display = "flex";


        inputSearch.value = "";

        temperature.innerHTML = `0°C`;

        discription.innerHTML = `--`

        humidity.innerHTML = `0 %`

        wind.innerHTML = `0 km/h`

        return;

    }
    location_not_found.style.display = "none";

    weather_body.style.display = "flex";

    temperature.innerHTML = `${Math.round(weather_data.main.temp - 273.15)}°C`;

    discription.innerHTML = `${weather_data.weather[0].description}`

    humidity.innerHTML = `${weather_data.main.humidity} %`

    wind.innerHTML = `${weather_data.wind.speed} km/h`

    switch (weather_data.weather[0].main) {
        case 'Clouds':
            weatherImg.src = "./images/clouds.png";
            break;
        case 'Clear':
            weatherImg.src = "./images/clear.png";
            break;
        case 'Rain':
            weatherImg.src = "./images/rain.png";
            break;
        case 'Snow':
            weatherImg.src = "./images/snow.png";
            break;
        case 'Mist':
            weatherImg.src = "./images/mist.png";
            break;
        case 'Drizzle':
            weatherImg.src = "./images/drizzle.png";
            break;
        case 'Haze':
            weatherImg.src = "./images/haze.png";
            break;


        default:
            weatherImg.src = "./images/"
            break;
    }
}

searchButton.addEventListener('click', () => {
    WeatherUpdate(inputSearch.value);
})

document.addEventListener('keypress', (e) => {
    if (e.key == 'Enter') {
        WeatherUpdate(inputSearch.value);
    }
})