Elinize sağlık ama bozulmuş sanırım. Güncelleme imkanınız olur mu?
Merhaba hocam verilen kod ve fikir için önce hocamıza teşekkür ederim ben bir kaç düzenleme yaparak tekrar sundum umarım işe yarar.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Depremler</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-4">
<h2>Depremler</h2>
<div class="form-group">
<label for="citySelect">Şehir Seç:</label>
<select class="form-control" id="citySelect">
<option value="istanbul">İstanbul</option>
<!-- Diğer şehirler buraya eklenebilir -->
</select>
</div>
<button class="btn btn-primary mb-2" onclick="refreshData()">Yenile</button>
<div id="depremContent" class="alert alert-info"></div>
</div>
<script>
// Fonksiyonlar
function refreshData() {
var selectedCity = document.getElementById('citySelect').value;
fetchData(selectedCity);
}
function fetchData(city) {
fetch('https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&minmagnitude=2&orderby=time&limit=10&starttime=2000-01-01&endtime=2024-05-26&maxradiuskm=100&' + city)
.then(response => response.json())
.then(data => {
if (data.features && data.features.length > 0) {
var earthquakeList = '<ul>';
data.features.forEach(feature => {
var place = feature.properties.place;
var magnitude = feature.properties.mag;
earthquakeList += '<li>' + place + ' - Magnitude: ' + magnitude + '</li>';
});
earthquakeList += '</ul>';
document.getElementById('depremContent').innerHTML = earthquakeList;
} else {
document.getElementById('depremContent').innerHTML = '<div class="alert alert-danger">Deprem bulunamadı.</div>';
}
})
.catch(error => {
document.getElementById('depremContent').innerHTML = '<div class="alert alert-danger">Veri çekme hatası.</div>';
});
}
// İlk veri yükleme
fetchData('latitude=41.0082&longitude=28.9784');
</script>
</body>
</html>