EARTHQUAKE ALERT
EARTHQUAKE-ALERT-How-do-you-create-earthquake-alert-in-your-own-browser?
Descriptions
How do you create earthquake alert in your own browser?
You will be able to view earthquake alert in your area by simply putting latitude and longitude and take necessary steps to manage Earthquake.
To do this follow these steps:
STEP 1: Open your notepad from your computer
STEP 2: Copy the following code and paste it in notepad
STEP 3: Save it in the name of Earthquake-Alert
STEP 4: Right click on the icon and open it in any browser
Done. Now it will display earthquake alerts on the browser if there are any recent earthquakes with a magnitude of 4.5 or higher within the specified radius of the provided coordinates.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Earthquake Alert and Management</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}
.alert-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.alert {
padding: 20px;
border: 2px solid #333;
border-radius: 10px;
background-color: #ff6347;
color: white;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>Earthquake Alert and Management</h1>
</header>
<div class="alert-container">
<div class="alert" id="alert">
Loading earthquake data...
</div>
</div>
<script>
const apiUrl = 'https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&minmagnitude=4.5&latitude=YOUR_LATITUDE&longitude=YOUR_LONGITUDE&maxradius=100';
function updateEarthquakeAlert(data) {
const alertElement = document.getElementById('alert');
if (data.features.length > 0) {
const earthquake = data.features[0];
const magnitude = earthquake.properties.mag;
const location = earthquake.properties.place;
const time = new Date(earthquake.properties.time).toLocaleString();
alertElement.innerHTML = `
<h2>Earthquake Alert</h2>
<p>Magnitude: ${magnitude}</p>
<p>Location: ${location}</p>
<p>Time: ${time}</p>
`;
} else {
alertElement.innerHTML = 'No earthquake alerts at the moment.';
}
}
fetch(apiUrl)
.then(response => response.json())
.then(data => {
updateEarthquakeAlert(data);
})
.catch(error => {
console.error('Error fetching earthquake data:', error);
});
</script>
</body>
</html>
Add a review