Weather/fetch.js at master · Abdul-dev-creator/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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

const weatherForm = document.querySelector('.weatherForm');
const cityInput = document.querySelector('.locationInput ');
const card = document.querySelector('.card');
const apiKey = "a4b4062ba5d7c6b928ec724a0067c383"; // Replace with your actual API key

weatherForm.addEventListener('submit', async event => {
    event.preventDefault();

    const city = cityInput.value;
    if (city) {
       try {
           const weatherData = await fetchWeatherData(city);
           displayWeatherData(weatherData);
       } catch (error) {
           console.error(error);
           displayError(error);
       }
    }else {
        displayError("Please enter a city name.");
    }
});

async function fetchWeatherData(city) {

    const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`;
    const response = await fetch(apiUrl);

    if (!response.ok) {
throw new Error('City not found');
}

return await response.json();

}

function displayWeatherData(data) {

    const { name: city,
        main: {temp, humidity},
        weather: [{description, id}]} = data;

    card.textContent = "";
    card.style.display = 'flex';


    const cityDisplay = document.createElement('h1');
    const temperatureDisplay = document.createElement('p');
    const conditionDisplay = document.createElement('p');
    const descDisplay = document.createElement('p');
    const weatherEmoji = document.createElement('p');

    cityDisplay.textContent = city;
    temperatureDisplay.textContent = ` ${((temp- 273.15) * (9/5) + 32).toFixed(1)}°C`;
    conditionDisplay.textContent = `Humidity: ${humidity}%`;
    descDisplay.textContent = description;
    weatherEmoji.textContent = getWeatherEmoji(id);


    cityDisplay.classList.add("cityDisplay");
    temperatureDisplay.classList.add("temperatureDisplay");
    conditionDisplay.classList.add("conditionDisplay");
    descDisplay.classList.add("descDisplay");
    weatherEmoji.classList.add("weatherEmoji");

    card.appendChild(weatherEmoji);

    card.appendChild(cityDisplay);
    card.appendChild(temperatureDisplay);
    card.appendChild(conditionDisplay);
    card.appendChild(descDisplay);

}

function getWeatherEmoji(weatherId) {

    switch (true) {
        case (weatherId >= 200 && weatherId < 300):
            return '⛈️'; // Thunderstorm
        case (weatherId >= 300 && weatherId < 400):
            return '🌧️'; // Drizzle
        case (weatherId >= 500 && weatherId < 600):
            return '🌧️'; // Rain
        case (weatherId >= 600 && weatherId < 700):
            return '❄️'; // Snow
        case (weatherId >= 700 && weatherId < 800):
            return '🌫️'; // Atmosphere
        case (weatherId === 800):
            return '☀️'; // Clear
         case (weatherId >= 801 && weatherId < 900):
            return '☁️'; // Clouds
        default:
            return '🌈'; // Default/Fallback

    }
}

function displayError(message) {
 const errorDisplay = document.createElement('p');
 errorDisplay.textContent = message;
 errorDisplay.classList.add('errorDisplay');


 card.textContent = '';
card.appendChild(errorDisplay);
card.style.display = 'flex';
}