WEATHER FORECAST
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
0 Comments