`).
Bu öğelere anlaşılır `id`'ler vererek, JavaScript üzerinden kolayca erişilebilir hale getirin. CSS dosyanızla da bu öğelere temel bir görünüm kazandırabilirsiniz, ancak ana odağımız JavaScript işlevselliği olacaktır.

Adım 2: JavaScript ile API'den Veri Çekme

Şimdi `script.js` dosyamıza geçelim. Bu adımda, seçtiğiniz API'den döviz kurlarını çekme işlemini gerçekleştireceğiz. Modern JavaScript'te bu işlem için `fetch()` metodu kullanılır.
Öncelikle, HTML'deki ilgili elementlere JavaScript üzerinden erişim sağlamalısınız:
```javascript
const miktarInput = document.getElementById('miktar');
const kaynakKurInput = document.getElementById('kaynakKur');
const hedefKurInput = document.getElementById('hedefKur');
const cevirButton = document.getElementById('cevir');
const sonucDiv = document.getElementById('sonuc');
```
Daha sonra, bir fonksiyon içinde `fetch()` metodunu kullanarak HTTP isteği göndereceğiz. API'den alacağınız `endpoint` URL'sini kullanacaksınız. Bu URL genellikle seçtiğiniz API'nin dokümantasyonunda belirtilir ve bazen bir API anahtarı ve base (temel) para birimi gibi parametreler içerir.
```javascript
async function kurlariGetir(baseKur) {
const API_KEY = 'SİZİN_API_ANAHTARINIZ'; // Kendi API anahtarınızı buraya yapıştırın
const url = `https://api.exchangerate-api.com/v4/latest/${baseKur}?apikey=${API_KEY}`; // Örnek URL
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP hata kodu: ${response.status}`);
}
const data = await response.json();
return data.rates; // Kurları içeren nesneyi döndürür
} catch (error) {
console.error("Döviz kurları çekilirken hata oluştu:", error);
sonucDiv.textContent = 'Döviz kurları alınamadı. Lütfen daha sonra tekrar deneyin.';
return null;
}
}
```
Bu fonksiyon, belirli bir temel para birimine göre döviz kurlarını getirir ve bir obje olarak döndürür.

Adım 3: Verileri İşleme ve Kullanıcı Arayüzünü Güncelleme

API'den gelen verileri başarıyla çektiğimize göre, şimdi bu verileri kullanarak çeviri işlemini yapma ve sonucu kullanıcıya gösterme zamanı.
`cevirButton`'a bir `click` olay dinleyicisi ekleyerek, kullanıcı düğmeye bastığında bu işlemi tetikleyeceğiz:
```javascript
cevirButton.addEventListener('click', async () => {
const miktar = parseFloat(miktarInput.value);
const kaynakKur = kaynakKurInput.value;
const hedefKur = hedefKurInput.value;
if (isNaN(miktar) || miktar <= 0) {
sonucDiv.textContent = 'Lütfen geçerli bir miktar girin.';
return;
}
sonucDiv.textContent = 'Çevriliyor...';
const rates = await kurlariGetir(kaynakKur); // Kaynak kura göre kurları getir
if (!rates) {
return; // Hata zaten kurlariGetir içinde yönetildi
}
const kaynakKurOrani = rates[kaynakKur]; // Kaynak kurun kendi oranı (genellikle 1)
const hedefKurOrani = rates[hedefKur]; // Hedef kurun oranı
if (!kaynakKurOrani || !hedefKurOrani) {
sonucDiv.textContent = 'Geçersiz kur seçimi veya kur bilgisi bulunamadı.';
return;
}
// Çeviri formülü: Miktar * (Hedef Kur Oranı / Kaynak Kur Oranı)
// Eğer API zaten base kura göre diğerlerini veriyorsa, direkt Hedef Kur Oranı ile çarpabilirsiniz.
// Örnek API base kur 1 USD veriyorsa ve siz EUR'dan TRY'ye çevirmek istiyorsanız:
// Miktar (EUR) * (TRY kuru / EUR kuru)
// Veya API base kur EUR ise: Miktar (EUR) * TRY kuru
const cevrilenMiktar = (miktar / kaynakKurOrani) * hedefKurOrani;
sonucDiv.textContent = `${miktar} ${kaynakKur} = ${cevrilenMiktar.toFixed(2)} ${hedefKur}`;
});
```
Bu kod bloğu, kullanıcının girdiği miktarı ve seçtiği para birimlerini alır, API'den çekilen kurları kullanarak hesaplama yapar ve sonucu `sonucDiv` elementine yazdırır. `toFixed(2)` metodu, sonucun ondalık basamak sayısını iki ile sınırlayarak daha okunaklı olmasını sağlar.

Adım 4: Kullanıcı Etkileşimini Ekleme

Uygulamamızın tam anlamıyla işlevsel olması için kullanıcı etkileşimini sağlamlaştırmamız gerekiyor. Yukarıdaki `addEventListener` ile zaten temel düğme etkileşimini ekledik. Ancak daha iyi bir kullanıcı deneyimi için şu adımlar da düşünülebilir:
* Açılışta Kurları Doldurma: Sayfa yüklendiğinde, varsayılan bir temel para birimiyle (örneğin USD) API'den kurları çekip `select` elementlerini doldurabilirsiniz. Bu sayede kullanıcı, para birimlerini elle yazmak yerine listeden seçebilir.
* Otomatik Çeviri: Kullanıcı bir miktar girdiğinde veya para birimi değiştirdiğinde, düğmeye basmaya gerek kalmadan otomatik olarak çeviri yapmayı düşünebilirsiniz. Bunun için `input` ve `change` olay dinleyicilerini kullanabilirsiniz.

Adım 5: Hata Yönetimi ve Kullanıcı Deneyimi İyileştirmeleri

Her uygulamada olduğu gibi, döviz çeviricinizde de kullanıcı deneyimini artıracak ve olası sorunları yönetecek mekanizmalar eklemek önemlidir.
* Geçersiz Girişleri Yakalama: Kullanıcının sayı yerine metin girmesi veya negatif bir değer girmesi gibi durumları kontrol edin (yukarıdaki örnekte `isNaN` ile kısmen yapıldı).
* Ağ Hataları: İnternet bağlantısı olmaması veya API sunucusuna ulaşılamaması gibi durumlarda kullanıcıya dostça bir mesaj gösterin. `try...catch` blokları bu konuda çok yardımcıdır.
* API Limitleri: API kullanım limitini aştığınızda API'den bir hata kodu gelebilir. Bu tür hataları yakalayıp kullanıcıya bilgi vermelisiniz.
* Yükleme Göstergesi: API isteği devam ederken, kullanıcının beklemesini bildiren 'Yükleniyor...' gibi bir mesaj veya animasyon ekleyebilirsiniz.
* Görsel İyileştirmeler: CSS ile uygulamanızın daha estetik görünmesini sağlayın. Responsive tasarım prensiplerini uygulayarak farklı cihazlarda da iyi görünmesini sağlayabilirsiniz. Daha fazla tasarım ipucu için '/makale.php?sayfa=web-tasarim-ipuçları' makalemizi inceleyebilirsiniz.

Gelişmiş Özellikler ve Sonraki Adımlar

Temel döviz çeviricinizi başarıyla oluşturduktan sonra, projenizi daha da geliştirmek için çeşitli ek özellikler düşünebilirsiniz:
* Tarihsel Kurlar: Bazı API'ler tarihsel döviz kurlarına erişim sağlar. Bu verileri kullanarak belirli bir tarihteki kur değerlerini gösterebilir veya trend grafikleri çizebilirsiniz.
* Favori Para Birimleri: Kullanıcının sık kullandığı para birimlerini kaydetme özelliği ekleyebilirsiniz.
* Otomatik Tamamlama: Para birimi seçiciye otomatik tamamlama özelliği ekleyerek kullanıcı deneyimini iyileştirebilirsiniz.
* Tarayıcı Depolama (LocalStorage): Kullanıcının en son yaptığı çevirileri veya tercihleri yerel depolamada saklayabilirsiniz.
* Gelişmiş Arayüz: Animasyonlar, farklı tema seçenekleri ve daha zengin bir kullanıcı arayüzü ile uygulamanızı profesyonel bir seviyeye taşıyabilirsiniz.
Unutmayın, her yeni özellik, öğrenme ve uygulama için yeni bir fırsattır.

Sonuç

Tebrikler! Bu adımları takip ederek, basit bir REST API kullanarak kendi döviz çevirici uygulamanızı başarıyla oluşturmuş olmalısınız. Bu proje, REST API'lerin nasıl çalıştığını, JavaScript ile harici verilerin nasıl çekilip işlendiğini ve bir web uygulamasının temel bileşenlerinin nasıl bir araya geldiğini anlamak için mükemmel bir başlangıç noktasıdır.
Bu proje sayesinde kazandığınız bilgiler, web geliştirme kariyerinizde size pek çok kapı açacaktır. Deney yapmaktan, yeni özellikler eklemekten ve kodunuzu sürekli olarak iyileştirmekten çekinmeyin. Her yeni proje ve her karşılaştığınız sorun, sizi daha iyi bir geliştirici yapacaktır. İyi kodlamalar!