JavaScript ile Anlık USD/TRY Döviz Kuru Dönüştürme

JSON verilerini çekmek için de parametreler kullanabilirsiniz. Örneğin, aşağıdaki kod parçacığında symbol parametresini kullanarak CryptoCompare API’sinden veri çekiyoruz.

Bu örnekte, fsym parametresi ile hangi para biriminin verilerini çekeceğimizi, tsyms parametresi ile de hangi para birimlerine çevireceğimizi belirtiyoruz.

Parametreleri URL’ye eklemek için, ? işareti ile başlatıyor ve & işareti ile diğer parametreleri ayırıyoruz. Her parametre, parametre_adı=değer şeklinde yazılır. Örneğin, fsym=USD&tsyms=TRY gibi.

Aşağıdaki kod parçacığında CryptoCompare API’sini kullanarak JavaScript ile doları Türk lirasına çevirebilirsiniz:


fetch('https://min-api.cryptocompare.com/data/price?fsym=USD&tsyms=TRY')
  .then(response => response.json())
  .then(data => {
    console.log(`1 USD = ${data.TRY} TRY`); // Doların Türk lirası cinsinden değeri
  });

fetch('https://min-api.cryptocompare.com/data/price?fsym=USD&tsyms=TRY')

.then(response => response.json())

.then(data => {

console.log(`1 USD = ${data.TRY} TRY`); // Doların Türk lirası cinsinden değeri

});

Bu örnekte, fsym parametresi ile hangi para biriminin verilerini çekeceğimizi, tsyms parametresi ile de hangi para birimlerine çevireceğimizi belirtiyoruz. Bu örnekte, doları Türk lirası cinsine çeviriyoruz.

Daha sonra, fetch() fonksiyonu ile API’ye istek gönderiyor ve cevabı alıyoruz. Cevabın içinde bulunan verileri, response.json() ile JSON nesnesine dönüştürüyor ve then() bloğunda işleyebiliyoruz. Bu örnekte, doların Türk lirası cinsinden değerini console.log() ile ekrana yazdırıyoruz.

Ancak HTML ile görsel olarak görmek ve girdiğimiz miktarın ne kadar yaptığını görmek için örneği biraz değiştirip genişletiyoruz.


<!DOCTYPE html>
<html lang="tr">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tasarım Kodlama</title>
</head>

<body>


    <form action="">
        USD<input type="radio" name="rbKur" id="rbUSD" ><br>
        TRY<input type="radio" name="rbKur" id="rbTRY" ><br>
        <input type="number" id="miktar"  min="1" value="1">
        <div id="ucretler">

        </div>

    </form>

    <script>

        async function getUcret() {
            if(rbTRY.checked){ 
                const response = await fetch( 'https://min-api.cryptocompare.com/data/price?fsym=TRY&tsyms=USD' )
                const data = await response.json()

                document.getElementById('ucretler').innerHTML = `
                    ${miktar.value} TRY = ${data.USD * miktar.value} USD<br>
                `;
            }else{
                const response = await fetch( 'https://min-api.cryptocompare.com/data/price?fsym=USD&tsyms=TRY' )
                const data = await response.json()

                console.log(data)
                document.getElementById('ucretler').innerHTML = `
                    ${miktar.value} USD = ${data.TRY * miktar.value} TRY<br>
                `;
            }
        }

        rbUSD.oninput=getUcret;
        rbTRY.oninput=getUcret;
        miktar.oninput=getUcret;
    </script>

</body>

</html>

<!DOCTYPE html>

<head>

<title>Tasarım Kodlama</title>

</head>

<body>

USD<input type="radio" name="rbKur" id="rbUSD" ><br>

TRY<input type="radio" name="rbKur" id="rbTRY" ><br>

</div>

</form>

async function getUcret() {

if(rbTRY.checked){

const response = await fetch( 'https://min-api.cryptocompare.com/data/price?fsym=TRY&tsyms=USD' )

const data = await response.json()

document.getElementById('ucretler').innerHTML = `

${miktar.value} TRY = ${data.USD * miktar.value} USD<br>

}else{

const response = await fetch( 'https://min-api.cryptocompare.com/data/price?fsym=USD&tsyms=TRY' )

const data = await response.json()

console.log(data)

document.getElementById('ucretler').innerHTML = `

${miktar.value} USD = ${data.TRY * miktar.value} TRY<br>

}

rbUSD.oninput=getUcret;

rbTRY.oninput=getUcret;

miktar.oninput=getUcret;

</script>

</body>

</html>

Kodu biraz açıklayalım.

u kod parçacığında, kullanıcının seçtiği para birimine göre CryptoCompare API’sini kullanarak bir döviz çevirme işlemi gerçekleştiriliyor. Örneğin, eğer kullanıcı Türk lirası seçerse, Türk lirasının dolar cinsine çevirilmesi için API’ye istek gönderilir. Eğer kullanıcı dolar seçerse, doların Türk lirası cinsine çevirilmesi için API’ye istek gönderilir.

Bu kod parçacığında, CryptoCompare API’sini kullanarak döviz kuru dönüştürme işlemini gerçekleştiriyorsunuz. Örneğin, kullanıcının seçtiği para birimi Türk lirası ise, doları Türk lirası cinsine çevirir ve ekrana yazdırırsınız.

Bu kod parçacığında, getUcret() adında bir asenkron fonksiyon oluşturulmuş. Bu fonksiyon, belirtilen miktarın döviz cinsine çevirimi için CryptoCompare API’sini kullanır. Örneğin, Türk lirası cinsinden bir miktarı dolara çevirirken, API’ye fsym=TRY&tsyms=USD şeklinde bir istek gönderir. Dolar cinsinden bir miktarı Türk lirasına çevirirken ise, fsym=USD&tsyms=TRY şeklinde bir istek gönderir.

Bu fonksiyon içinde, fetch() fonksiyonu ile API’ye istek gönderilir ve cevap alınır. Cevap, response.json() ile JSON nesnesine dönüştürülür. Daha sonra, div elementinin innerHTML özelliği güncellenir ve çevirilen miktar ekrana yazdırılır.

Evet, bu kod parçacığının devamında, rbUSD ve rbTRY adlı radio buttonlarının değiştirilmesi ve miktar adlı input elementinin değeri değiştiğinde getUcret() fonksiyonunun çağrılması için oninput olayı kullanılmış. Bu olay, elementin değeri değiştiğinde tetiklenir ve getUcret() fonksiyonu çağrılır. Bu sayede, kullanıcı radio button’ları veya input elementini değiştirirse, çevirim işlemi tekrar gerçekleştirilir.

Umarım bu açıklamalar size yardımcı olmuştur. Eğer daha fazla yardıma ihtiyacınız olursa, lütfen sorun.

EtiketlerDöviz Kuru Dönüştürücü JavaScript JavaScript Örnekleri

JavaScript ile Anlık USD/TRY Döviz Kuru Dönüştürme

Yorum Yap

İptal Et

Bunları da beğenebilirsiniz

Yorum Yap