Son 15 Deprem Listesi Api.

Bu Api son 15 Deprem verir, bu sayıyı dilediğiniz kadar artırabilir veya azaltabilirsiniz. ($depremler = array_slice($sonuc['result'], 0, 15) buradan artırabilir veya kısaltabilirsiniz gelen değerleri

<?php
$apiAdresi = 'https://api.orhanaydogdu.com.tr/deprem/live.php';
$apiVerisi = file_get_contents($apiAdresi);
$sonuc = json_decode($apiVerisi, true);

$tabloBasliklari = ['Tarih', 'Derinlik', 'Büyüklük', 'Yer'];
$depremler = array_slice($sonuc['result'], 0, 15);

function tarihCevir($tarih)
{
    $aylar = ['January' => 'Ocak', 'February' => 'Şubat', 'March' => 'Mart', 'April' => 'Nisan', 'May' => 'Mayıs', 'June' => 'Haziran', 'July' => 'Temmuz', 'August' => 'Ağustos', 'September' => 'Eylül', 'October' => 'Ekim', 'November' => 'Kasım', 'December' => 'Aralık'];

    return strtr($tarih, $aylar);
}

echo '<style>table{width:100%;border-collapse:collapse;}th,td{border:1px solid #ccc;padding:8px;text-align:center;}.tarih{width:200px;text-align:center;}.derinlik{width:80px;text-align:center;}.buyukluk{width:80px;text-align:center;}.yer{text-align:left;}</style>';

echo '<table><tr>';
foreach ($tabloBasliklari as $baslik) {
    echo ($baslik === 'Yer') ? '<th class="yer">' . $baslik . '</th>' : '<th>' . $baslik . '</th>';
}
echo '</tr>';

foreach ($depremler as $deprem) {
    echo '<tr><td class="tarih">' . tarihCevir(date('d F Y H:i:s', strtotime(str_replace('.', '-', $deprem['date'])))) . '</td><td class="derinlik">' . $deprem['depth'] . '</td><td class="buyukluk">' . $deprem['mag'] . '</td><td class="yer">' . $deprem['title'] . '</td></tr>';
}

echo '</table>';
?>

elinize sağlık hocam

Aynısını birde ajax ile uygulayalım buda her 10 saniyede bir güncelleme yaparak yeni olabilecek verileri sayfa yenileme yapmadan getirecektir. Biraz daha güncelleme yaparak daha cici hale getirdim.

<table id="depremTablosu">
  <thead>
    <tr>
      <th>TARİH/SAAT</th>
      <th>DERİNLİK (km)</th>
      <th>BÜYÜKLÜK</th>
      <th>ŞEHİR</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">

<script>
  function tarihCevir(tarih) {
    var aylar = {
      'January': 'Ocak',
      'February': 'Şubat',
      'March': 'Mart',
      'April': 'Nisan',
      'May': 'Mayıs',
      'June': 'Haziran',
      'July': 'Temmuz',
      'August': 'Ağustos',
      'September': 'Eylül',
      'October': 'Ekim',
      'November': 'Kasım',
      'December': 'Aralık'
    };
    return tarih.replace(/([A-Za-z]+) (\d+), (\d+)/, function (match, ay, gun, yil) {
      return gun + ' ' + aylar[ay] + ' ' + yil;
    });
  }

  function appendCSS(css) {
    var styleElement = document.createElement("style");
    styleElement.appendChild(document.createTextNode(css));
    document.head.appendChild(styleElement);
  }

  var sonDepremTarih = null; // Son deprem tarihi

  function formatDerinlik(derinlik) {
    if (derinlik >= 1) {
      return derinlik + ' km';
    } else {
      return (derinlik * 1000) + ' m';
    }
  }

  function formatBuyukluk(buyukluk) {
    if (buyukluk <= 3) {
      return '<span class="buyukluk-yesil"><i class="fas fa-arrow-down"></i>&nbsp;' + buyukluk + '</span>';
    } else if (buyukluk <= 5) {
      return '<span class="buyukluk-turuncu"><i class="fas fa-exclamation"></i>&nbsp;' + buyukluk + '</span>';
    } else {
      return '<span class="buyukluk-kirmizi"><i class="fas fa-arrow-up"></i>&nbsp;' + buyukluk + '</span>';
    }
  }

  function verileriGuncelle() {
    fetch('https://api.orhanaydogdu.com.tr/deprem/live.php')
      .then(response => response.json())
      .then(data => {
        var depremler = data.result;
        var tablo = document.getElementById('depremTablosu');

        if (depremler.length > 0) {
          var sonDeprem = depremler[0];
          var tarih = tarihCevir(sonDeprem.date);

          if (sonDepremTarih !== tarih) {
            // Yeni bir veri var, tabloya uyarı ekle
            sonDepremTarih = tarih;

            var uyariSatiri = '<tr><td colspan="4">Yeni bir veri geldi!</td></tr>';
            var tbody = tablo.getElementsByTagName('tbody')[0];
            tbody.insertAdjacentHTML('afterbegin', uyariSatiri);
          }

          var tabloHTML = '';
          depremler.slice(0, 15).forEach(function(deprem) {
            var tarih = tarihCevir(deprem.date);
            var derinlik = formatDerinlik(deprem.depth);
            var buyukluk = formatBuyukluk(deprem.mag);
            var row = '<tr><td class="tarih">' + tarih + '</td><td class="derinlik">' + derinlik + '</td><td class="buyukluk">' + buyukluk + '</td><td class="yer">' + deprem.title + '</td></tr>';
            tabloHTML += row;
          });

          tablo.getElementsByTagName('tbody')[0].innerHTML = tabloHTML;
        }
      })
      .catch(error => {
        console.log('Veri alınırken bir hata oluştu: ', error);
      });
  }

  // İlk veri yükleme
  verileriGuncelle();

  // 3 saniyede bir veri güncelleme
  setInterval(function () {
    verileriGuncelle();
  }, 10000);

var css = "table { width: 60%; border-collapse: collapse; } th, td { border: 1px solid #ccc; padding: 8px; text-align: center; font-family: 'Roboto', sans-serif; font-size: 14px; } th:nth-child(4), td:nth-child(4) { text-align: left; } .tarih { width: 200px; text-align: center; } .derinlik { width: 120px; text-align: center; } .buyukluk { width: 80px; text-align: center; } .buyukluk-yesil { color: green; font-weight: bold; } .buyukluk-turuncu { color: orange; font-weight: bold; } .buyukluk-kirmizi { color: red; font-weight: bold; }";
  appendCSS(css);
</script>