weather/script.js at master · the-red-dk/weather · 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
// require('dotenv').config();

// if (!process.env.API_KEY) {
//     console.error("API_KEY is not set in the environment variables.");
//     alert("API_KEY is not set in the environment variables.");
// }

const inputBox = document.querySelector(".input-box");
const searchBtn = document.getElementById("searchBtn");
const weatherImg = document.getElementById("weatherImage");
const temperature = document.querySelector(".temperature");
const description = document.querySelector(".description");
const humidity = document.getElementById("humidity");
const windSpeed = document.getElementById("wind-speed");
const locationNotFound = document.querySelector(".locationNotFound");
const weatherBody = document.querySelector(".weather-body");

//https://api.openweathermap.org/data/2.5/weather?q={city name}&appid={API key}


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

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

    // console.log(weatherData);
    if(weatherData.cod === `404`) {
        locationNotFound.style.display = "flex";
        weatherBody.style.display = "none";
        weatherImg.src = "images/4042.png";

        console.log("Error, place not found or invalid.")
        return;
    }
    else {
        console.log("Setting image:", weatherImg.src);
        weatherBody.style.display = "flex";
        locationNotFound.style.display = "none";

    }
    // locationNotFound.style.display = "none";
    // weatherBody.style.display = "flex";


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

    switch(weatherData.weather[0].main)
    {
        case 'Clouds':
            weatherImg.src = "images/cloud2.png";
            console.log("Setting image:", weatherImg.src);
            break;
        case 'Clear':
            weatherImg.src = "images/clear.png";
            break;
        case 'Rain':
            weatherImg.src = "images/rain2.png";
            break;
        case 'Mist':
            weatherImg.src = "images/mist.png";
            break;
        case 'Snow':
            weatherImg.src = "images/snow.png";
            break;
        default:
            console.log("Not found");
    }

    console.log(weatherData);
}

searchBtn.addEventListener('click', ()=>{
    checkWeather(inputBox.value);
})

inputBox.addEventListener('keydown', (event) => {
    if (event.key === 'Enter') {
    checkWeather(inputBox.value);
    }
});