Web sitenize günlük olarak güncellenen döviz kurlarını eklemek, ziyaretçileriniz için değerli bir kaynak oluşturabilir. Bu işlem, Türkiye Cumhuriyet Merkez Bankası’nın (TCMB) sağladığı API servisi üzerinden yapılabilir. İşte bu süreci adım adım nasıl gerçekleştireceğinizi detaylı bir şekilde açıklayacağım.
Adım 1: TCMB API’sinden Döviz Kurlarını Çekme
TCMB, günlük döviz kurlarını XML formatında sağlar. Bu verileri çekmek için JavaScript kullanacağız.
JavaScript Kodu (currency.js)
document.addEventListener('DOMContentLoaded', function() {
var url = 'https://www.tcmb.gov.tr/kurlar/today.xml'; // TCMB'nin API URL'si
fetch(url)
.then(response => response.text())
.then(str => (new window.DOMParser()).parseFromString(str, "text/xml"))
.then(data => {
var currencies = data.getElementsByTagName("Currency");
var output = '<h3>Güncel Döviz Kurları</h3><ul>';
for(var i = 0; i < currencies.length; i++) {
var currencyCode = currencies[i].getAttribute("Kod");
var currencyRate = currencies[i].getElementsByTagName("ForexBuying")[0].textContent;
output += `<li>${currencyCode}: ${currencyRate}</li>`;
}
output += '</ul>';
document.getElementById('currency-rates').innerHTML = output;
})
.catch(error => console.log(error));
});
Bu JavaScript kodu, TCMB’nin XML verilerini çeker, işler ve bir HTML listesinde gösterir.
Adım 2: HTML Kodlarını Hazırlama
Bu JavaScript kodunu çalıştırmak için basit bir HTML yapısı kullanabilirsiniz.
HTML Kodu
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Döviz Kurları</title>
</head>
<body>
<div id="currency-rates">Döviz Kurları Yükleniyor...</div>
<script src="currency.js"></script>
</body>
</html>
Bu HTML kodu, JavaScript dosyasını içe aktarır ve döviz kurlarının gösterileceği bir <div> içerir.
Adım 3: Kodları Web Sitenize Ekleyin
Bu HTML ve JavaScript kodlarını web sitenizin uygun bir bölümüne ekleyin.
currency.jsdosyasını sitenizin JavaScript dosyalarının bulunduğu klasöre yerleştirin.- HTML kodunu, döviz kurlarını göstermek istediğiniz sayfanın ilgili bölümüne ekleyin.
Adım 4: Kodları Özelleştirin ve Güncelleyin
Bu kodları, sitenizin tasarımına ve ihtiyaçlarına göre özelleştirebilirsiniz. Örneğin, farklı döviz birimlerini göstermek veya tasarımı değiştirmek için HTML ve CSS kullanabilirsiniz.
Sonuç
Bu rehberle, web sitenize günlük olarak güncellenen döviz kurlarını başarıyla ekleyebilirsiniz. Bu, sitenizin ziyaretçilerine değerli finansal bilgiler sağlarken, sitenizin içeriğini de zenginleştirecektir. Benzeri diğer yazılarımızı okumak için tıklatın.
