Weather-App-with-JS/script.js at main · Roslaan001/Weather-App-with-JS · 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
const apiKey ="e4ef7538d894b0da992fb8c53002c0a6";
const apiUrl = "https://api.openweathermap.org/data/2.5/weather";

const locationInput = document.getElementById("locationInput");
const searchButton = document.getElementById("searchButton");
const locationElement = document.getElementById("location");
const temperatureElement = document.getElementById("temperature");
const descriptionElement = document.getElementById("description");

searchButton.addEventListener("click", () => {
    const location = locationInput.value;
    if (location) {
        fetchWeather (location);
    }
});


function fetchWeather(location) {
    const url = `${apiUrl}?q=${encodeURIComponent(location)}&appid=${apiKey}&units=metric`;


    fetch(url)
        .then((response) => {
            if (!response.ok) {
                if (response.status === 404) {
                    throw new Error("City not found");
                } else {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
            }
             return response.json()
        })
        .then ((data) => {
            locationElement.textContent = data.name;
            temperatureElement.textContent = `${Math.round(data.main.temp)}°C`;
            descriptionElement.textContent = data.weather[0].description;
        })

    .catch((error) => {
        console.error ("Error fetching the weather data:", error);
        locationElement.textContent = "Oops! Seems you input a wrong city";
        temperatureElement.textContent = "";
        descriptionElement.textContent = "";
    })

}

// const apiKey = "e4ef7538d894b0da992fb8c53002c0a6";
// const apiUrl = "https://api.openweathermap.org/data/2.5/weather";

// const locationInput = document.getElementById("locationInput");
// const searchButton = document.getElementById("searchButton");
// const locationElement = document.getElementById("location");
// const temperatureElement = document.getElementById("temperature");
// const descriptionElement = document.getElementById("description");

// searchButton.addEventListener("click", () => {
//     const location = locationInput.value;
//     if (location) {
//         fetchWeather(location);
//     }
// });

// function fetchWeather(location) {
//     const url = `${apiUrl}?q=${encodeURIComponent(location)}&appid=${apiKey}&units=metric`;

//     fetch(url)
//         .then((response) => {
//             if (!response.ok) {
//                 throw new Error(`HTTP error! status: ${response.status}`);
//             }
//             return response.json();
//         })
//         .then((data) => {
//             locationElement.textContent = data.name;
//             temperatureElement.textContent = `${Math.round(data.main.temp)}°C`;
//             descriptionElement.textContent = data.weather[0].description;
//         })
//         .catch((error) => {
//             console.error("Error fetching the weather data:", error);
//             locationElement.textContent = "Error fetching the weather data.";
//             temperatureElement.textContent = "";
//             descriptionElement.textContent = "";
//         });
// }