weatherA/weatherApp.html at main · divinemike019/weatherA · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Weather App</title>
    <link rel="stylesheet" href="styles2.css">
</head>
<body style="background-color: rgb(63, 191, 214); text-align: center; padding-top: 50px;">
    <input type="text" id="cityInput" placeholder="Enter city name" />
    <button style="background-color: rgb(104, 230, 230);" id="getWeatherButton" onClick="getWeather()">Get Weather</button>
    <p id="weatherText" style="color: white; font-size: 18px;"></p>

    <script type="text/javascript">
        const YOUR_API_KEY = 'c50ac57dc2e9202ef6b67b061ae6ff14'; // Replace with your actual API key

        async function getWeather() {
            let cityInput = document.getElementById('cityInput');
            let weatherText = document.getElementById('weatherText');
            let city = cityInput.value.trim();

            if (!city) {
                weatherText.textContent = "Please enter a city name.";
                return;
            }

            try {
                let response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${YOUR_API_KEY}&units=metric`);
                if (!response.ok) {
                    throw new Error('City not found or API error.');
                }

                const data = await response.json();
                const condition = data.weather[0].description;
                const temp = data.main.temp;
                const iconCode = data.weather[0].icon;
                const iconUrl = `https://openweathermap.org/img/wn/${iconCode}@2x.png`;

                weatherText.innerHTML = `
                    <strong>${city}</strong><br>
                    Condition: ${condition}<br>
                    Temperature: ${temp}°C<br>
                    <img src="${iconUrl}" alt="Weather icon">
                `;
            } catch (error) {
                weatherText.textContent = error.message;
            }
        }
    </script>
</body>
</html>