Weather-Forecasting/script.js at main · Dhruvrathi001/Weather-Forecasting · 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
108
109
110
111
112
113
114
115
116
117
const searchCityInput = document.querySelector("#searchCity");
const searchCityBtn = document.querySelector(".search-btn");

const cityNotFoundError = document.querySelector(".city-not-found-error");

// bydefault city name
const cityName = "New Delhi";

const weatherIcon = document.querySelector(".weather-icon");

const apiKey = "94e0815485c0e16c10267c3b8e0dcc96";


async function fetchWeatherData(apiUrl)
{
    try{
        const response = await fetch(apiUrl);
        if(!response.ok){
            cityNotFoundError.style.display = "block";
            document.querySelector(".weather").style.display = "none";
            // alert("City not found");
            return;
        }

        const data = await response.json();
        console.log(data);

        // hide error when data is valid
        cityNotFoundError.style.display = "none";

        // update the UI page with fetched data
        document.querySelector(".city").textContent = data.name;
        document.querySelector(".temp").textContent = `${Math.round(data.main.temp)}°C`;
        document.querySelector(".humidity").textContent = `${data.main.humidity}%`;
        document.querySelector(".wind").textContent = `${data.wind.speed} km/h`;
        document.querySelector(".max-temp").textContent = `Max Temp: ${Math.round(data.main.temp_max)}°C`;
        document.querySelector(".min-temp").textContent = `Min Temp: ${Math.round(data.main.temp_min)}°C`;
        document.querySelector(".feels-like").textContent = `Feels Like: ${Math.round(data.main.feels_like)}°C`;
        document.querySelector(".visibility").textContent = `${data.visibility}`;

        const mainWeather = data.weather[0].main;

        if(mainWeather === "Clouds"){
            weatherIcon.src = "icon/cloudy.webp";
        }
        else if(mainWeather === "Thunderstorm"){
            weatherIcon.src = "icon/thunderstorm.webp";
        }
        else if(mainWeather === "Drizzle"){          // fixed spelling
            weatherIcon.src = "icon/thunderstorm.webp";
        }
        else if(mainWeather === "Rain"){
            weatherIcon.src = "icon/rainy.webp";
        }
        else if(mainWeather === "Snow"){             // fixed case
            weatherIcon.src = "icon/snow.webp";
        }
        else if(mainWeather === "Mist"){
            weatherIcon.src = "icon/mist.webp";
        }
        else if(mainWeather === "Haze"){
            weatherIcon.src = "icon/haze.webp";
        }
        else if(mainWeather === "Dust"){
            weatherIcon.src = "icon/dust.webp";
        }
        else if(mainWeather === "Fog"){
            weatherIcon.src = "icon/fog.webp";
        }
        else if(mainWeather === "Sand"){
            weatherIcon.src = "icon/sand.webp";
        }
        else if(mainWeather === "Ash"){              // fixed "Ashr" → "Ash"
            weatherIcon.src = "icon/ash.webp";
        }
        else if(mainWeather === "Squall"){
            weatherIcon.src = "icon/squall.webp";
        }
        else if(mainWeather === "Tornado"){
            weatherIcon.src = "icon/tornado.webp";
        }
        else{
            weatherIcon.src = "icon/clear.webp";
        }

        document.querySelector(".weather").style.display = "block";
    }
    catch(error){
        // console.log("Error in fetching weather data:", error);
        // alert("Unable to fetch weather details. Check city name or your internet.");
        cityNotFoundError.style.display = "block";
        document.querySelector(".weather").style.display = "none";
        return;
    }
}


// Event listener for search button
searchCityBtn.addEventListener("click", () => {
    const cityName = searchCityInput.value.trim();  // get latest value
    if (!cityName) {
        alert("Please enter a city name 🙂");
        return;
    }

    const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${encodeURIComponent(cityName)}&appid=${apiKey}&units=metric`;

    fetchWeatherData(apiUrl);

    searchCityInput.value = "";
})

searchCityInput.addEventListener("keyup", (event) => {
    if(event.key === "Enter"){
        searchCityBtn.click();
    }
})