Javascript İle Dinamik Bir Etkileşimli Para Birimi Dönüştürücü Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Bu projeyi hayata geçirmek için karmaşık bir kurulum sürecine ihtiyacınız yoktur. Modern bir web tarayıcısı (Chrome, Firefox veya Edge) ve bir kod editörü (VS Code önerilir) yeterlidir. Projemizde dış kaynaklı bir döviz kuru API'si kullanacağız. Bu tür API'ler, finansal verileri JSON formatında sunar.

• Modern Tarayıcı: ES6+ özelliklerini destekleyen güncel bir tarayıcı.
• Kod Editörü: VS Code veya benzeri bir metin editörü.
• API Anahtarı: Ücretsiz bir döviz kuru API servisine (örneğin ExchangeRate-API) kayıt olarak bir erişim anahtarı almanız gerekecektir.
• Temel Bilgi: HTML, CSS ve JavaScript (Fetch API, Async/Await) hakkında temel düzeyde bilgi sahibi olmanız yeterlidir.

Adım 1: HTML Yapısını Oluşturma

Dinamik dönüştürücümüzün iskeletini oluşturmak için temiz ve erişilebilir bir HTML yapısına ihtiyacımız var. Kullanıcıdan miktar alacağımız bir input, para birimi seçimi için select elementleri ve sonucu göstereceğimiz bir div alanı tanımlayacağız.

    


Döviz Dönüştürücü
    
    
    
    Dönüştür
    
Sonuç burada görünecek

Burada id değerlerini JavaScript tarafında kolayca erişebilmek için anlamlı seçtik. input tipi number olarak ayarlandı, böylece kullanıcı sadece sayısal değerler girebilecektir.

Adım 2: API'den Veri Çekme (Fetch API)

JavaScript ile dinamik bir etkileşimli para birimi dönüştürücü yaparken en kritik nokta, güncel veriyi almaktır. Bunun için fetch fonksiyonunu ve async/await yapısını kullanacağız. Bu yöntem, kodun okunabilirliğini artırır ve asenkron işlemleri yönetmeyi kolaylaştırır.

async function getExchangeRates(baseCurrency) {
    const apiKey = 'YOUR_API_KEY';
    const url = `https://v6.exchangerate-api.com/v6/${apiKey}/latest/${baseCurrency}`;
    
    try {
        const response = await fetch(url);
        const data = await response.json();
        return data.conversion_rates;
    } catch (error) {
        console.error("Veri çekme hatası:", error);
    }
}

Bu fonksiyon, seçilen baz para birimine göre tüm döviz kurlarını bir obje olarak döndürür. try/catch bloğu, ağ hatalarını yakalamak ve uygulamanın çökmesini engellemek için zorunludur.

Adım 3: Seçim Listelerini Dinamik Doldurma

Kullanıcıya sabit bir liste sunmak yerine, API'den gelen verilerle seçim kutularını (select) doldurmak daha profesyonel bir yaklaşımdır. Böylece API güncellendiğinde kodunuzu değiştirmenize gerek kalmaz.

function populateCurrencies(rates) {
    const fromSelect = document.getElementById('fromCurrency');
    const toSelect = document.getElementById('toCurrency');
    
    Object.keys(rates).forEach(currency => {
        const option1 = document.createElement('option');
        option1.value = currency;
        option1.text = currency;
        fromSelect.add(option1);
        
        const option2 = option1.cloneNode(true);
        toSelect.add(option2);
    });
}

Object.keys(rates) metodu, API'den gelen kur objesinin tüm anahtarlarını (USD, TRY, EUR vb.) bir dizi olarak döndürür. Bu dizi üzerinde dönerek option elementlerini oluşturup select kutularına ekliyoruz.

Adım 4: Hesaplama Mantığını Kurma

Artık elimizde veriler ve kullanıcı girdisi var. Şimdi, seçilen para birimleri arasındaki matematiksel işlemi gerçekleştirme zamanı. Dönüştürme formülü: Sonuç = Miktar * (Hedef Kur / Kaynak Kur) şeklindedir.

function calculateConversion(amount, rates, targetCurrency) {
    const rate = rates[targetCurrency];
    return (amount * rate).toFixed(2);
}

toFixed(2) metodu, finansal sonuçların virgülden sonra iki basamakla sınırlandırılmasını sağlar. Bu, kullanıcıya daha temiz bir çıktı sunmak için standart bir uygulamadır.

Adım 5: Etkileşimli Olay Yönetimi (Event Handling)

Kullanıcı "Dönüştür" butonuna bastığında veya seçimleri değiştirdiğinde işlemin tetiklenmesi gerekir. JavaScript'te addEventListener kullanarak bu etkileşimi yönetiriz.

document.getElementById('convertBtn').addEventListener('click', async () => {
    const amount = document.getElementById('amount').value;
    const from = document.getElementById('fromCurrency').value;
    const to = document.getElementById('toCurrency').value;
    
    const rates = await getExchangeRates(from);
    const result = calculateConversion(amount, rates, to);
    
    document.getElementById('result').innerText = `${amount} ${from} = ${result} ${to}`;
});

Bu kod bloğu, buton tıklama olayını dinler, güncel kurları çeker ve hesaplamayı yaparak sonucu HTML içerisinde görüntüler. Kullanıcı her tıkladığında en güncel veriyi almış oluruz.

Karşılaştırma: Dönüştürme Yöntemleri

Kritik Güvenlik Uyarısı: API anahtarınızı asla doğrudan istemci taraflı (client-side) JavaScript kodunda açık bir şekilde bırakmayın. Gerçek projelerde, API isteklerini bir arka uç (backend) sunucusu üzerinden yönlendirmek veya anahtarı çevresel değişkenlerde (environment variables) saklamak daha güvenlidir. XSS (Cross-Site Scripting) saldırılarına karşı kullanıcı girdilerini her zaman temizleyin.

Sıkça Sorulan Sorular

API'den gelen veriler neden bazen geç yükleniyor?

API istekleri ağ gecikmesine tabidir. Kullanıcıya "Yükleniyor..." gibi bir durum mesajı göstermek veya bir yükleme animasyonu eklemek kullanıcı deneyimini iyileştirecektir.

Daha fazla para birimi eklemek için ne yapmalıyım?

Kullandığınız API servisi zaten dünya genelindeki çoğu para birimini destekler. API'den dönen veriyi console.log(data) ile inceleyerek hangi birimlerin mevcut olduğunu görebilirsiniz.

Neden toFixed(2) kullanıyoruz?

Para birimleri genellikle iki ondalık basamakla ifade edilir. Daha fazla basamak, kullanıcı için gereksiz karmaşıklık yaratır ve finansal yazılım standartlarına aykırıdır.

Hata yönetimi için ne yapılabilir?

API limitleri dolduğunda veya internet kesildiğinde kullanıcıya anlamlı hata mesajları göstermek için try-catch bloklarını genişletebilirsiniz.

Bu projeyi mobil uyumlu yapabilir miyim?

Evet, CSS'te flexbox veya grid kullanarak ekran boyutuna göre öğelerin yerleşimini değiştirebilirsiniz.

Finansal Sorumluluk Reddi: Bu makalede yer alan kod örnekleri ve para birimi dönüştürme uygulaması tamamen eğitim amaçlıdır. Hiçbir şekilde yatırım tavsiyesi değildir. Döviz kurları dalgalı olabilir ve gerçek finansal işlemlerde kullanılacak veriler için resmi finans kuruluşlarının veya bankaların güncel kurları esas alınmalıdır.

Uygulamanın Performansını Artırmak İçin İleri İpuçları

Döviz dönüştürücü uygulamanızın kullanıcı deneyimini iyileştirmek için API isteklerini optimize etmek kritik öneme sahiptir. Her tuş vuruşunda veya her seçimde API'ye istek göndermek yerine, verileri tarayıcı hafızasında saklamak (caching) uygulamanızı çok daha hızlı hale getirecektir.

Aşağıdaki örnekte, verilerin bir kez çekilip 10 dakika boyunca yerel bellekte tutulmasını sağlayan basit bir mantık yer almaktadır:

let cachedData = null;
let lastFetchTime = 0;
const CACHE_DURATION = 10 * 60 * 1000; // 10 dakika

async function getExchangeRates() {
    const now = Date.now();
    
    if (cachedData && (now - lastFetchTime < CACHE_DURATION)) {
        return cachedData;
    }

    const response = await fetch('https://api.exchangerate-api.com/v4/latest/USD');
    cachedData = await response.json();
    lastFetchTime = now;
    return cachedData;
}

Kullanıcı Deneyimi İçin Debounce Kullanımı

Eğer kullanıcı "miktar" girişine her rakam girdiğinde otomatik hesaplama yapıyorsanız, debounce tekniğini kullanmalısınız. Bu teknik, kullanıcının yazmayı bitirmesini bekleyerek gereksiz fonksiyon çağrılarını engeller.

function debounce(func, delay) {
    let timeout;
    return function(...args) {
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(this, args), delay);
    };
}

const handleInput = debounce(() => {
    calculateResult();
}, 500);

document.getElementById('amount').addEventListener('input', handleInput);

Uygulamanın Yayına Alınması (Deployment)

Projenizi geliştirdikten sonra, dünyayla paylaşmak için ücretsiz ve güvenilir platformları tercih edebilirsiniz. GitHub Pages veya Netlify, statik web siteleri için en uygun çözümlerdir.

• GitHub Pages: Projenizi bir GitHub deposuna yükleyerek "Settings" kısmından "Pages" sekmesini aktif edebilirsiniz.
• Netlify: Sürükle-bırak yöntemiyle veya GitHub entegrasyonu ile saniyeler içinde canlı bir link alabilirsiniz.

Dikkat: Eğer uygulamanızda API anahtarı (API Key) kullanıyorsanız, bu anahtarı asla doğrudan kod içerisinde açık bir şekilde bırakmayın. Ücretsiz API'lerde genellikle kısıtlama (rate limit) bulunur; bu nedenle projenizi yayına alırken API sağlayıcınızın kullanım sınırlarını kontrol etmeyi unutmayın.

Hata Ayıklama (Debugging) Stratejileri

Uygulamanızda beklenmedik bir durum oluştuğunda, tarayıcının geliştirici araçlarını (F12) aktif olarak kullanmalısınız. Özellikle console.log() yerine console.table() kullanarak API'den gelen JSON verisini daha okunabilir bir tablo formatında inceleyebilirsiniz.

fetch('https://api.exchangerate-api.com/v4/latest/USD')
    .then(res => res.json())
    .then(data => {
        console.table(data.rates); // Verileri tablo olarak konsolda görün
    })
    .catch(err => {
        console.error("Veri çekme hatası:", err);
        alert("Döviz kurları şu an güncellenemiyor, lütfen daha sonra tekrar deneyin.");
    });

Sonuç

JavaScript ile dinamik bir etkileşimli para birimi dönüştürücü yapmak, modern web geliştirme süreçlerinin temel taşlarını öğrenmek için harika bir yoldur. Bu rehberde, API'lerden veri çekmeyi, DOM öğelerini yönetmeyi ve kullanıcı etkileşimlerini işlemeyi öğrendiniz. Bir sonraki adım olarak, projenize yerel depolama (localStorage) ekleyerek kullanıcının son seçtiği para birimlerini tarayıcı kapansa bile hatırlamasını sağlayabilirsiniz. Geliştirmeye devam edin!