STORM ALERT
How do you know that storms are appearing in the area or city you are looking for?
You can easily know it by your browser app by following some steps:
There are two main steps to alert storm in any city:
1. Create HTML code for weather forecasting
2. Sign up open weather map website.
1. Create HTML code for storm alert
STEP 1: Open your notepad
STEP 2: Copy the following code and paste it to your notepad
STEP 3: Save it in the name stormalert.html
STEP 4: Open it in your browser
If storm appears in the city you input in the apps it will show “Alert: Storm is approaching!” and if not it will show “no storm detected at the moment”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Storm Alert</title>
<script>
function checkWeather() {
var apiKey = 'YOUR_API_KEY';
var cityNameInput = document.getElementById('city-name');
var cityName = cityNameInput.value;
var url = `http://api.openweathermap.org/data/2.5/weather?q=${cityName}&appid=${apiKey}`;
fetch(url)
.then(response => response.json())
.then(data => {
var weatherConditions = data.weather[0].main;
var alertMessage = document.getElementById('alert-message');
if (weatherConditions === 'Thunderstorm') {
alertMessage.textContent = 'Alert: Storm is approaching!';
} else {
alertMessage.textContent = 'No storm detected at the moment.';
}
})
.catch(error => {
console.error('Error fetching weather data:', error);
});
}
</script>
</head>
<body>
<h1>Storm Alert System</h1>
<input type="text" id="city-name" placeholder="Enter city name">
<button onclick="checkWeather()">Check Weather</button>
<p id="alert-message"></p>
</body>
</html>
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 storm alert to any city in the world:
N.B. Don’t share your API KEY and store it in a safe place
0 Comments