Weather Forecast App JavaScript, API

👤 Sharing: AI 
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weather Forecast App</title>
    <style>
        body {
            font-family: sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        .container {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            width: 80%;
            max-width: 600px;
        }

        h1 {
            text-align: center;
            color: #333;
        }

        .search-bar {
            display: flex;
            margin-bottom: 20px;
        }

        input[type="text"] {
            flex: 1;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
        }

        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            margin-left: 10px;
        }

        button:hover {
            background-color: #3e8e41;
        }

        #weather-info {
            margin-top: 20px;
            text-align: center;
        }

        #weather-info h2 {
            color: #333;
        }

        #weather-info p {
            color: #555;
            margin: 5px 0;
        }

        #error-message {
            color: red;
            text-align: center;
            margin-top: 10px;
        }
    </style>
</head>
<body>

    <div class="container">
        <h1>Weather Forecast</h1>
        <div class="search-bar">
            <input type="text" id="city-input" placeholder="Enter city name">
            <button id="search-button">Search</button>
        </div>

        <div id="weather-info">
            <h2></h2>
            <p id="temperature"></p>
            <p id="description"></p>
            <p id="humidity"></p>
            <p id="wind-speed"></p>

        </div>
        <div id="error-message"></div>
    </div>

    <script>
        const apiKey = 'YOUR_API_KEY'; // Replace with your actual API key
        const searchButton = document.getElementById('search-button');
        const cityInput = document.getElementById('city-input');
        const weatherInfoDiv = document.getElementById('weather-info');
        const errorMessageDiv = document.getElementById('error-message');

        searchButton.addEventListener('click', () => {
            const city = cityInput.value;
            if (city) {
                getWeather(city);
            } else {
                displayError("Please enter a city name.");
            }
        });

        async function getWeather(city) {
            try {
                const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`; // Use metric units for temperature in Celsius
                const response = await fetch(apiUrl);

                if (!response.ok) {
                    if (response.status === 404) {
                        throw new Error("City not found.");
                    } else {
                        throw new Error("Failed to fetch weather data.");
                    }
                }

                const data = await response.json();
                displayWeather(data);
            } catch (error) {
                displayError(error.message);
            }
        }

        function displayWeather(data) {
            errorMessageDiv.textContent = ''; // Clear any previous error messages

            const cityName = data.name;
            const temperature = data.main.temp;
            const description = data.weather[0].description;
            const humidity = data.main.humidity;
            const windSpeed = data.wind.speed;

            weatherInfoDiv.querySelector('h2').textContent = `Weather in ${cityName}`;
            weatherInfoDiv.querySelector('#temperature').textContent = `Temperature: ${temperature}?C`;
            weatherInfoDiv.querySelector('#description').textContent = `Description: ${description}`;
            weatherInfoDiv.querySelector('#humidity').textContent = `Humidity: ${humidity}%`;
            weatherInfoDiv.querySelector('#wind-speed').textContent = `Wind Speed: ${windSpeed} m/s`;


            weatherInfoDiv.style.display = 'block'; // Make the weather info visible
        }

        function displayError(message) {
            weatherInfoDiv.style.display = 'none'; // Hide the weather info
            errorMessageDiv.textContent = message;
        }
    </script>
</body>
</html>
```
👁️ Viewed: 20

Comments