Javascript İle Dinamik Bir Döviz Kuru Dönüştürücü Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Dinamik bir döviz dönüştürücü geliştirmek için karmaşık kurulumlara ihtiyacınız yoktur. Modern bir tarayıcı, bir kod editörü (VS Code önerilir) ve temel HTML/CSS bilgisi yeterlidir. API verilerini çekmek için modern tarayıcıların desteklediği fetch API'sini kullanacağız.

• Kod Editörü: VS Code veya benzeri bir editör.
• API Anahtarı: Döviz kurlarını çekmek için ücretsiz bir servis (örneğin ExchangeRate-API veya benzeri) üzerinden ücretsiz bir hesap oluşturmanız gerekecektir.
• Tarayıcı Konsolu: Kodunuzu test etmek ve hataları ayıklamak için F12 tuşu ile tarayıcı konsolunu kullanmayı alışkanlık edinin.

Adım 1: HTML Arayüzünü Hazırlama

Dönüştürücü için basit ama işlevsel bir HTML yapısı kurmamız gerekir. Kullanıcının miktar gireceği bir input, kaynak ve hedef para birimlerini seçeceği select alanları ve sonucu göstereceğimiz bir div yapısı oluşturacağız.

    
    
        USD
        TRY
    
    
        EUR
        TRY
    
    Dönüştür
    

Bu yapı, kullanıcıdan gerekli verileri almak için standart form elementlerini kullanır. id nitelikleri, JavaScript tarafında bu elementlere kolayca erişmemizi sağlayacaktır.

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

Döviz kurları sürekli değiştiği için bu verileri statik olarak tutamayız. JavaScript'in fetch fonksiyonu ile güncel kurları sunucudan çekmemiz gerekir. Aşağıdaki kod, bir API isteğinin nasıl yapıldığını gösterir.

async function getExchangeRate(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);
    }
}

Burada async/await yapısı kullanılmıştır. Bu, asenkron işlemleri senkron bir akış gibi yönetmemizi sağlar. try-catch bloğu ise ağ hatalarına karşı uygulamanın çökmesini engeller.

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

API'den gelen veriler genellikle bir nesne (object) formatındadır. Bu nesne içinden hedef para biriminin değerini çekip, kullanıcının girdiği miktar ile çarpmamız gerekir.

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

toFixed(2) metodu, sonucu virgülden sonra iki basamak olacak şekilde sınırlandırır. Finansal hesaplamalarda hassasiyet önemlidir; bu yöntem basit projeler için yeterlidir.

Adım 4: DOM Manipülasyonu ve Etkileşim

Kullanıcı "Dönüştür" butonuna bastığında, verileri alıp hesaplamayı tetikleyen ve sonucu ekrana yazdıran ana fonksiyonu yazalım. Bu adım, uygulamanın "dinamik" kısmını oluşturur.

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 getExchangeRate(from);
    const result = calculate(amount, rates, to);
    
    document.getElementById('result').innerText = `${amount} ${from} = ${result} ${to}`;
});

addEventListener metodu, buton üzerindeki tıklama olayını dinler. Kullanıcı butona bastığı anda API'ye istek gider ve sonuç anında güncellenir.

Adım 5: Hata Yönetimi ve Güvenlik

Bir yazılım projesinde kullanıcı hatalarını ve API kaynaklı sorunları öngörmek şarttır. Örneğin, kullanıcı negatif bir miktar girebilir veya API isteği başarısız olabilir.

function validateInput(amount) {
    if (amount


Performans Optimizasyonu: API İsteklerini Önbelleğe Alma

Döviz kuru verileri genellikle anlık olarak değişse de, her kullanıcı etkileşiminde API'ye tekrar istek göndermek hem kota limitlerinizi tüketir hem de uygulamanın yavaş çalışmasına neden olur. Tarayıcı önbelleği (localStorage) kullanarak, verileri belirli bir süre saklayabilir ve gereksiz ağ trafiğini engelleyebilirsiniz.

Aşağıdaki kod bloğu, verinin son çekilme zamanını kontrol ederek, eğer 10 dakikadan az süre geçmişse API yerine yerel veriyi kullanır:

const CACHE_KEY = 'exchange_rates_cache';
const CACHE_DURATION = 10 * 60 * 1000; // 10 dakika

async function getCachedRates(baseCurrency) {
    const cachedData = JSON.parse(localStorage.getItem(CACHE_KEY));
    const now = new Date().getTime();

    if (cachedData && (now - cachedData.timestamp < CACHE_DURATION) && cachedData.base === baseCurrency) {
        console.log("Önbellekten yükleniyor...");
        return cachedData.rates;
    }

    const rates = await fetchExchangeRateFromAPI(baseCurrency);
    localStorage.setItem(CACHE_KEY, JSON.stringify({
        base: baseCurrency,
        rates: rates,
        timestamp: now
    }));
    return rates;
}






Gelişmiş Kullanıcı Deneyimi: Dinamik Arama ve Filtreleme

Döviz listesi uzadıkça, kullanıcının doğru para birimini seçmesi zorlaşır. HTML select elementini bir datalist veya özel bir arama kutusu ile desteklemek, UX (Kullanıcı Deneyimi) açısından büyük bir iyileştirmedir. Kullanıcı yazmaya başladığında, mevcut döviz listesi otomatik olarak filtrelenmelidir.

Bu özellik için aşağıdaki basit filtreleme mantığını kullanabilirsiniz:

const currencyInput = document.getElementById('currencySearch');
const currencyList = document.getElementById('currencyOptions');

currencyInput.addEventListener('input', (e) => {
    const filter = e.target.value.toLowerCase();
    const options = currencyList.getElementsByTagName('option');

    for (let i = 0; i < options.length; i++) {
        const text = options[i].value.toLowerCase();
        options[i].style.display = text.includes(filter) ? "" : "none";
    }
});

Döviz Dönüştürücü İçin Test Senaryoları

Uygulamanızın kararlılığını artırmak için şu temel test senaryolarını mutlaka manuel veya otomatik olarak kontrol etmelisiniz:


    
Sıfır ve Negatif Değerler: Kullanıcı giriş alanına 0 veya negatif bir sayı girdiğinde uygulamanın hata mesajı verip vermediği.
    
Bağlantı Kesintisi: İnternet bağlantısı koptuğunda fetch isteğinin catch bloğuna düşüp düşmediği.
    
API Limit Aşımı: API anahtarınızın günlük limitini doldurduğunda kullanıcıya "Servis geçici olarak kullanılamıyor" uyarısı gösterilip gösterilmediği.
    
Hassas Hesaplama: JavaScript'teki kayan noktalı sayı (floating point) hatalarını önlemek için toFixed(2) metodunun kullanılıp kullanılmadığı.


Özellikle finansal uygulamalarda, para birimi dönüşümlerinde 0.1 + 0.2 gibi işlemlerin 0.30000000000000004 sonucunu vermemesi için sayıları her zaman tam sayıya çevirip işlem yapmalı veya Big.js gibi kütüphanelerden destek almalısınız.