{"id":20239249,"url":"https://github.com/musayar9/exchangerateapp","last_synced_at":"2026-05-02T08:32:34.348Z","repository":{"id":144709568,"uuid":"565744989","full_name":"musayar9/ExchangeRateApp","owner":"musayar9","description":"ExchangeRate App","archived":false,"fork":false,"pushed_at":"2023-12-26T11:41:46.000Z","size":918,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-03T15:11:22.007Z","etag":null,"topics":["bootstrap","css","javascript"],"latest_commit_sha":null,"homepage":"https://musayar9.github.io/ExchangeRateApp/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/musayar9.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-11-14T08:35:33.000Z","updated_at":"2023-01-14T09:23:38.000Z","dependencies_parsed_at":"2023-12-26T12:54:42.775Z","dependency_job_id":null,"html_url":"https://github.com/musayar9/ExchangeRateApp","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/musayar9/ExchangeRateApp","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/musayar9%2FExchangeRateApp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/musayar9%2FExchangeRateApp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/musayar9%2FExchangeRateApp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/musayar9%2FExchangeRateApp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/musayar9","download_url":"https://codeload.github.com/musayar9/ExchangeRateApp/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/musayar9%2FExchangeRateApp/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32528223,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-02T01:12:54.858Z","status":"online","status_checked_at":"2026-05-02T02:00:05.923Z","response_time":132,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","css","javascript"],"created_at":"2024-11-14T08:38:10.152Z","updated_at":"2026-05-02T08:32:34.326Z","avatar_url":"https://github.com/musayar9.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Döviz Kuru Uygulaması \n\nBu projemde güncel döviz kuru uygulaması yaptım istediğimiz ülkenin parasını istediğimiz para birimine dönüştürebililoruz.  Uygulama apisini *https://app.exchangerate-api.com/sign-in/retry* sitesinden alındı. \n\n![img-1](images/1.jpg)\n\nUygulama tasarımında 1.döviz kuru alanına çevirmek istediğiniz para birimini 2.döviz kuru alanında hangi para birimine çevirmek istiyorsanız o ülkenin para birimini seçiyorsunuz. Aşağıdaki resimde 1 USD kaç TRY olduğuna bakılıyor.\n\n![img-2](images/2.jpg)\n\n## Döviz Kuru Tasarımı\n\nBu uygulamayı yaparken bootsrap kütüphanesinden yararlanıldı. Nav tag'ıiçinde container classı altında Döviz Kuru Hesapla başlığı tanımlandın. \n\n```html\n\u003cnav class=\"navbar navbar-dark bg-dark text-center\"\u003e\n\n        \u003cdiv class=\"container justify-content-center\"\u003e\n            \u003ca href=\"\" class=\"navbar-brand\"\u003eDöviz Kuru Hesapla\u003c/a\u003e\n\n        \u003c/div\u003e\n     \u003c/nav\u003e\n```\n\nNav tag'ını kapatıktan sonra yeni bir div etiketi içinde container classı açıyoruz. Bu container içinde uygulama tasarımı yer almaktadır. Containerın genişliğini 800px olarak ayarıyoruz. Containerın hemen altında 2 tane  row classı oluşturuyoruz, row claslarının altında da 2 tane colon oluşturup bu colonlar içine input taglarını ekliyoruz.  Bu inputllar içine kullanıcı sorgulamak istediği para birimi değerlerini girecek. İnputlarin içinede select özeliğini ekliyoruz\u003cdatalist id=\"one_list\"\u003e \u003c/datalist\u003e bu kod içine javascript ile ülkelerin para birim, değerlerini göndereceğiz. \n\n```html\n  \u003cdiv class=\"container mt-5 denım \" style=\"width: 800px;\"\u003e\n\n        \u003cdiv class=\"row\"\u003e\n            \u003cdiv class=\"col input-group\"\u003e\n          \u003cspan class=\"input-group-text\"\u003e\u003ci class=\"fa-solid fa-coins text-warning\"\u003e\u003c/i\u003e\u003c/span\u003e\n              \u003cinput type=\"text\" class=\"form-control\" id=\"oneValue\"  list=\"one_list\" placeholder=\"1.döviz kuru\"\u003e\n              \u003cdatalist id=\"one_list\"\u003e \u003c/datalist\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"col input-group\"\u003e\n              \u003cspan class=\"input-group-text\"\u003e\u003ci class=\"fa-solid fa-coins text-warning\"\u003e\u003c/i\u003e\u003c/span\u003e \n              \u003cinput type=\"text\" class=\"form-control\" id=\"twoValue\" placeholder=\"2.döviz kuru\" list=\"two_list\"\u003e\n              \u003cdatalist id=\"two_list\"\u003e \u003c/datalist\u003e\n            \u003c/div\u003e\n\n        \u003c/div\u003e\n```\n\nDiğer row altında da 2 tane colon oluşturuyoruz. İlk kolona  bir tane input tagı ekliyoruz. Kullanıcı bu input tagı içine sorgulatmak istediği para birimi miktarını girecek. İkinci colon içine  button  ekliyoruz kullanıcı bu butona tıkladığında sorgulama işlemini gerçekleşitirecek. Butonun içine de spin ikonu ekliyoruz. Bu ikon ile kullanıcıya çevirme işleminin gerçekleştiğini gösteriyoruz.\n\n```html\n \u003cdiv class=\"row \"\u003e\n            \u003cdiv class=\"col input-group\"\u003e\n                  \u003cspan class=\"input-group-text  mt-3\"\u003e \u003ci class=\"fas fa-sort-numeric-up text-primary\"\u003e\u003c/i\u003e\u003c/span\u003e  \n                \u003cinput type=\"number\" id=\"moneyAmount\" class=\"form-control mt-3\" placeholder=\"Hesaplanacak Para miktarı\"\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"col input-group\"\u003e\n                \u003cbutton class=\"btn btn-outline-primary mt-3 w-100\" id=\"exchangeCalculate\"\u003e \u003ci class=\"fa fa-refresh fa-spin text-outline-primary float-start mt-1 \"\u003e\u003c/i\u003eHesapla\u003c/button\u003e\n    \n            \u003c/div\u003e\n  \n        \u003c/div\u003e\n\n```\n\nKullanıcı sorgulama işlemi yaparken bir kaç saniye bekleme işlemi gerçekleşmekte bunuda kullanıcıya göstermek için loading spinerı oluşturdum. Kullanıcı butona tıkladıktan sonra  row classının hemen altında sonuç getirene kadar kullanıcıya gözükecek. Sonuç ekrana geldiğinde loading spini ekrandan kaybolacak.\n\n\n\nKullanıcı döviz kurunu hesaplatırken bir kaç saniyelik bekleme süresi gerçekleşmektedir. Bu bekleme süresini kullanıcıya göstermek için loading spinerı oluşturuyoruz. Kullanıcı hesapla butonuna tıkladıktan sonra sonuç gelene kadar hesapla butonun altında loading spiner'ı kullanıcıya gösterilecek. Sonuç ekrana geldiğinde loading spinerı kaybolacak.\n\n![img-3](images/3.jpg)\n\n\n\n```html\n   \u003cdiv id=\"resultValue\"\u003e\n\n            \u003c!-- \u003cdiv class=\"card border-primary shadow mt-3\"\u003e\n                \u003cdiv class=\"card-body text-center\" style=\"font-size:16px\"\u003e\n                100$ = 1745 TL\n                \u003c/div\u003e\n            \u003c/div\u003e --\u003e\n\n        \u003c/div\u003e\n\n        \u003cdiv id=\"resultValue2\"\u003e\u003c/div\u003e\n     \u003c/div\u003e\n\n```\n\nSonuç bir sonuç alanı daha oluşturdum bu alan altında  altında sorgulatılan para biriminin diğer ülkelerdeki değeri karşımıza gelecek. Örneğin 1 Euro'yu TRY çeviriyoruz. Bu sonuç altında 1 Euro'nun diğer ülkelerdeki oranı karşımız gelecek.\n\n![img-4](images/4.jpg)\n\n## Döviz Kuru JavaScript Kodları;\n\nJavascript kodlarını yazarken ilk önce *https://app.exchangerate-api.com/sign-in/retry*  sitesinden Url ve kişiye özel Apı bilgisini alıyoruz.\n\n![](images/5.jpg)\n\n![](images/6.jpg)\n\nYukarıdaki resimde ExhangeRate-Api sayfasından aldığımız apıleri kullanmak için değişkenlere atıyoruz. \n\n```javascript\n\nconst oneValue= document.getElementById(\"oneValue\");\nconst twoValue = document.getElementById(\"twoValue\")\nconst oneList = document.getElementById(\"one_list\")\nconst twoList = document.getElementById(\"two_list\")\nconst moneyAmount = document.getElementById(\"moneyAmount\")\nconst exchangeCalculate = document.getElementById(\"exchangeCalculate\")\nconst resultValue = document.getElementById(\"resultValue\")\nconst resultValue2 = document.getElementById(\"resultValue2\")\n```\n\nYukarıdaki kodları tasarım alanında oluşturduğumuz input, button ve divlerin id bilgilerini alıyoruz ve hepsini oluşturulan değişkenler içine atıyoruz.. \n\nDöviz kuru'nu  hesaplamak için async-await fonksiyonu oluşturuyoruz. Bu fonksiyon içerisinde de ilk önce ExchangeRate-Api sayfasından aldığımız url  bilgisini fetch ediyoruz ve bunu response değişkeni içerisine atıyoruz. Response değişkeni içerisindeki veriyi de json çevirerek data değişkenine atıyoruz.\n\n```javascript\nasync function showMoney(){\n    document.querySelector(\"#load\").style.display = \"none\"\n    try{\n        const response = await fetch(url + \"/codes\");\n        console.log(response)\n        const data = await response.json();\n        console.log(data)\n```\n\n![](images/7.jpg)\n\nKırmızı okla gösterilen alanda fetch ettiğimiz url bilgisi yer almaktadır. Mavi okla gösterilen yerde ise json' çevirip data değişkeni içerisine attığımız veriler yer almaktadır. Biz bu veriler üzerinden işlemlerimizi yapıyoruz. \n\nJson işleminden sonra items diye bir değişken oluşturuyoruz bu değişken içerisine data.supported_codes yazarak supported_codes içerindeki verileri alıp items değikeşkeni içine atıyoruz.\n\n![](images/8.jpg)\n\n```javascript\nconst items = await data.supported_codes;\n        console.log(items)\n```\n\nİtems değişkenini ekrana yazdırdığımızda şöyle bir sonuç gelecek ekranımıza; ![](images/Screenshot_9.jpg)\n\nlet options; diye bir seçenek değişkeni oluşturuyoruz. for of döngüsü kullanarak items içindeki verileri exchange değişkeni içerisine aktarıyoruz. Yinelenebilir nesneler arasında bir döngü oluşturuyoruz.  Options değişkeni içerisine   \u003coption value = ${exchange[0]}\u003e ${exchange[1]}\u003c/option\u003e` diyerek bir tane seçenek listesi oluşturuyoruz. Bu seçenek bize ülkelerin para birimini *exchange[0]* ve ülkenin *exchange[1]* adını gösterecek.\n\n```javascript\n let options;\n\n        for(let exchange of items){\n            options += `\n            \u003coption value = ${exchange[0]}\u003e ${exchange[1]}\u003c/option\u003e`\n\n            oneList.innerHTML = options;\n            twoList.innerHTML = options\n        }\n\n```\n\nOluşturmuş olduğumuz bu seçenek listesini de one_list ve two_list'eleri içine atıyoruz.\n\n```javascript\nconst oneList = document.getElementById(\"one_list\")\n \u003cdatalist id=\"one_list\"\u003e \u003c/datalist\u003e\nconst twoList = document.getElementById(\"two_list\")\n \u003cdatalist id=\"two_list\"\u003e \u003c/datalist\u003e\n```\n\nİnputlar içine tıkladığımızda bize şöyle bir seçenek listesi dönecek.\n\n![](images/9.jpg)\n\nOluşturduğumuz seçenek listeleri ile kolaylıkla isteğimiz ülkenin para birimini bulabiliriz.\n\nHesapla butonuna tıkladığımızda input alanlarına girilen verilerin sonuçlarını döndürmek için hesapla butonuna **const exchangeCalculate = document.getElementById(\"exchangeCalculate\")** bir tene event olayı vermeliyiz ki butona tıkladığımızda oluşturacağımız fonksiyın gerçekleşsin. \n\nButona tıkladığımızda \n\n- 1.döviz kuru alanına girdiğimiz değeri exchange1 değişkeni içerisine atıyoruz. \n\n  ```javascript\n     \u003cinput type=\"text\" class=\"form-control\" id=\"oneValue\"  list=\"one_list\" placeholder=\"1.döviz kuru\"\u003e\n         const oneValue= document.getElementById(\"oneValue\");\n  const exchange1 = oneValue.value;\n  \n  ```\n\n- 2.döviz kuru alanına girdiğimiz değeri exhange2 değişkeni içerisine atıyoruz.\n\n  ```javascript\n  \u003cinput type=\"text\" class=\"form-control\" id=\"twoValueplaceholder=\"2.döviz kuru\" list=\"two_list\"\u003e\n        const twoValue = document.getElementById(\"twoValue\")\n      const exchange2 = twoValue.value;\n  ```\n\n- moneyAmount alanına hesaplatmak istediğimiz para miktarını  giriyoruz ve bunu da amount değişkeni içerisine atıyoruz.\n\n  ```javascript\n   \u003cinput type=\"number\" id=\"moneyAmount\" class=\"form-control mt-3\" placeholder=\"Hesaplanacak Para miktarı\"\u003e\n       const moneyAmount = document.getElementById(\"moneyAmount\")\n      const  amount = moneyAmount.value;\n  ```\n\nshowExhange diye async-await fonksiyonu oluşturuyoruz. Bu fonksiyon içerisinde de resp diye bir değişken tanımlıyoruz  bu değişken içerisine  **fetch(url + \"/latest/\" + exchange1)** url'nin sonuna 1.döviz kuru alanından gelen ülkenin para birimi değerini aktarıp bunu fetch adiyoruz. Bu değişkeni json() veriye çevirip data değişkeni içerisine aktarıyoruz.\n\n![](images/13.jpg)\n\nKahverengi okla gösterilen alan resp değişkeni içerisnde fetch edilen url bilgisi yer almaktadır. Mavi okla gösterilen alanda ise data değişkeni içiresinde json() veriye çevirilen veri yer almaktadır.\n\n```javascript\n   async function showExchange(){\n        const resp = await fetch(url + \"/latest/\" + exchange1)\n        console.log(resp)\n        const data = await resp.json();\n        console.log(data);\n\n        const outpot = data.conversion_rates;\n\n        console.log(outpot)\n```\n\nData içinde concersion-rates alanını alıp oluşturmuş olduğumuz outpot değişkeni içerisine atıyoruz.\n\n![](images/14.jpg)\n\nData içerisinden almış olduğumuz  conversion_rates verisinin içinden exchange2 değişkeni içerisine girilen para birimini alıp amount (miktarla) çarpıyoruz toFixed() fonksiyonu ile noktadan sonra sadece 2 basamağı alıyoruz. Result değişkeni içerisine atıyoruz. Bu değiken içerisine attığımız veri işlem sonucunu döndürecek.\n\n![](images/15.jpg)\n\nBu sonucu ekrana yazdırmak için valueResult adında bir değişken oluşturuyoruz. Bu değişken içerisinde div etiketi altında card classı oluşturarak dönecek olan sonucu card-body içinde  tanımlıyoruz. Bu değişken içerisinde bana ilk önce girilen miktar bilgisi miktar bilgisinin yanında hangi kur üzerinden çevirim yapılacağı yer alıyor, eşşittirin  sol tarafında ise bana sonuc bilgisi gelecek sonuc bilgisinin yanında hangi döviz kuruna çevirme işlemi yaptıysam o ülkenin para birimi kısaltması gelecek. valueResult değişkenini de  **resultValue.innerHTML = valueResult**  resultValue içerisine atıyoruz. Aşağıdaki resimde sonuç ekranda oklarla gösterilmiştir.\n\n \n\n```javascript\n let valueResult;\n        valueResult = `\n        \u003cdiv class=\"card border-primary shadow mt-2\" \u003e\n            \u003cdiv class=\"card-body text-center \" style=\" font-size:24px; font-weight:bold;\"\u003e\n            ${amount} ${exchange1} = ${result} ${exchange2}\n            \u003c/div\u003e\n        \n        \u003c/div\u003e\n        `\n   resultValue.innerHTML = valueResult\n\n```\n\n![](images/16.jpg)\n\nSonucun altında kırmızı oklarla gösterilen alan  bana diğer ülkelerin 1 USD karşılığındaki değerlerini getirecek.\n\n![](images/17.jpg)\n\nBu alanı oluşturmak için outpot diye bir değişken oluşturuyoruz bu değişken içerisine data içerisindeki conversion_rates verisini atıyoruz. For in döngüsü ile bir döngü oluşturuyoruz outpot içindeki verileri otherExchange değişkeni içersine ekliyoruz. For in döngüsüyle yapmak istediğimiz nesne içerisindeki verilere ulaşarak bunların değerleri üzerinde işlem yapmak.\n\n```javascript\nconst outpot = data.conversion_rates;\n\n        console.log(outpot)\n        \n for(let otherExchange in outpot){\n\t console.log(otherExchange, outpot[otherExchange])\n\n```\n\n![](images/18.jpg)\n\nİstedğimiz sonuçları yukarıdaki resimdeli gibi gelecektir. Biz bu fonksiyon ile key ve value değerileri üzerinden işlem yapabileceğiz.\n\n```html javascript\n  \u003cdiv id=\"resultValue2\"\u003e\u003c/div\u003e\n \u003c/div\u003e\n```\n\nresultValue2 değişkeni içerisine div etiketi altında card classı oluşturduk. Card altında da ul etiketi içinde li elemanları oluşturarak  otherExhange içerisine attığımız değerleri liste haline ekrana yazdıracağız.\n\n```javascript\n  const resultValue2 = document.getElementById(\"resultValue2\")\n  \n  resultValue2.innerHTML += `\n    \u003cdiv class =  \" card border-primary d-inline-flex ava mt-2\"\u003e \n    \u003cul style=\"list-style-type:none\" class=\"list-group list-group-horizontal d-inline-flex\"\u003e\n      \u003cli class=\"list-group-item float-end\"\u003e\n      ${otherExchange}:${outpot[otherExchange]}\n      \u003c/li\u003e\n\n    \u003c/ul\u003e\n    \u003c/div\u003e\n    \n    `\n```\n\nli tag'leri içinde *otherExchange* ile ülkenin para birimini, *outpot[otherExchange]* ile de  dönderilen döviz kuru oranını alıyoruz.\n\nSonuç altında diğer ülkelerin döviz kuru oranlarını kullanıcıya gösterildikten sonra belli bir saniye sonra kalkmasını isiyoruz bunu setTimeout fonksiyonu ekleyerek gerçekleştirdik. ResulValue2 değişkeni içerisindeki bilgi kullanıcıya 10 saniye gösterilecek 10 saniye sonunda ekrandan kaldırılacak.\n\n```javascript\nsetTimeout(()=\u003e{\n        document.getElementById(\"resultValue2\").remove()\n    },10000)\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmusayar9%2Fexchangerateapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmusayar9%2Fexchangerateapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmusayar9%2Fexchangerateapp/lists"}