WEATHER FORECAST

Add a review
WEATHER-FORECAST-Easy-way-to-Forecast-Weather-to-Any-City-in-the-World:

Descriptions

 



 
 
Easy way to Forecast Weather to Any City in the World:
 
Weather forecast is used for various purposes including business.
 
There are two main steps to forecast weather in any city:
 
1. Create HTML code for weather forecasting
2. Sign up open weather map website.
 
1. Create HTML code for weather forecasting:
 
There are some steps to implement it:
 
STEP 1: Open Notepad to your computer
STEP 2: Copy the following code and paste it in notepad
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weather Forecast</title>
    <style>
        /* Add your custom CSS styles here */
    </style>
</head>
<body>
    <h1>Weather Forecast</h1>
    <div id="weather-info">
        <label for="city">Enter city name:</label>
        <input type="text" id="city" placeholder="City name">
        <button onclick="getWeather()">Get Weather</button>
        <div id="weather-results">
            <!-- Weather data will be displayed here -->
        </div>
    </div>
 
    <script>
        function getWeather() {
            const apiKey = 'YOUR_API_KEY'; // Replace 'YOUR_API_KEY' with your OpenWeatherMap API key
            const city = document.getElementById('city').value;
 
            // Make an API request to OpenWeatherMap
            fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`)
                .then(response => response.json())
                .then(data => {
                    // Display weather data
                    const weatherResults = document.getElementById('weather-results');
                    weatherResults.innerHTML = `
                        <h2>${data.name}</h2>
                        <p>Weather: ${data.weather[0].description}</p>
                        <p>Temperature: ${data.main.temp}°C</p>
                        <p>Humidity: ${data.main.humidity}%</p>
                    `;
                })
                .catch(error => {
                    console.error('Error fetching weather data:', error);
                    const weatherResults = document.getElementById('weather-results');
                    weatherResults.innerHTML = '<p>City not found. Please try again.</p>';
                });
        }
    </script>
</body>
</html>
 
STEP 3: Save it in the name weather.html
 
Now go to the second step
 
2. Sign up open weather map website.
 
STEP 1 : Sign up or Log in: Go to the OpenWeatherMap website  (https://home.openweathermap.org/users/sign_up) and create an account if you don't have one. If you already have an account, log in using your credentials.
STEP 2: After logging in go to your login tab and find the option  'My Api keys' and click on it.
STEP 3: Now you will get the key and copy it carefully
STEP 4 : Open the notepad again
STEP 5 : Now paste it to the above code where named ‘YOUR_API_KEY’
STEP 6 : Save it.
 
Yes done! now open your file named weather.html in your browser.
You can now view weather forecast to any city in the world:
 
N.B. Don’t share your API KEY and store it in a safe place
 
 
 

Similar Products

8255498817396861036

Add a review