From 6c07bb5142176a8cd0d99dceb2d1e9ed5684224f Mon Sep 17 00:00:00 2001 From: rahman-cs-it Date: Wed, 20 Mar 2024 11:32:23 +0530 Subject: [PATCH 1/2] successfully solve the api error --- .vscode/settings.json | 3 +++ CurrencyConverter/app.js | 51 +++++++++++++++++++++++++++++------- CurrencyConverter/index.html | 26 +++++++++--------- CurrencyConverter/style.css | 2 +- 4 files changed, 59 insertions(+), 23 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/CurrencyConverter/app.js b/CurrencyConverter/app.js index 6009ab0..248ace8 100644 --- a/CurrencyConverter/app.js +++ b/CurrencyConverter/app.js @@ -1,11 +1,11 @@ -const BASE_URL = - "https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies"; +const BASE_URL ="https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies"; const dropdowns = document.querySelectorAll(".dropdown select"); -const btn = document.querySelector("form button"); +const btn = document.querySelector("#ExchangeButton"); const fromCurr = document.querySelector(".from select"); const toCurr = document.querySelector(".to select"); const msg = document.querySelector(".msg"); +const swap = document.querySelector("#swap"); for (let select of dropdowns) { for (currCode in countryList) { @@ -25,20 +25,48 @@ for (let select of dropdowns) { }); } +const swapping = () => { + // Swap the values of fromCurr and toCurr select elements + + const temp = fromCurr.value; + fromCurr.value = toCurr.value; + toCurr.value = temp; + + // Update the flag images based on the new selections + updateFlag(fromCurr); + updateFlag(toCurr); + + // Update the exchange rate based on the new selections + updateExchangeRate(); +}; + +swap.addEventListener("click", (evt) => { + evt.preventDefault(); // Prevent the default button behavior + swapping(); // Execute the swapping function +}); + const updateExchangeRate = async () => { + let amount = document.querySelector(".amount input"); let amtVal = amount.value; + // console.log(amount.value) if (amtVal === "" || amtVal < 1) { amtVal = 1; amount.value = "1"; } - const URL = `${BASE_URL}/${fromCurr.value.toLowerCase()}/${toCurr.value.toLowerCase()}.json`; + console.log(amount.value); + const URL = `${BASE_URL}/${fromCurr.value.toLowerCase()}.json`; let response = await fetch(URL); let data = await response.json(); - let rate = data[toCurr.value.toLowerCase()]; - + console.log(data) + + let rate = data[fromCurr.value.toLowerCase()][toCurr.value.toLowerCase()]; + + console.log(data); let finalAmount = amtVal * rate; + console.log(finalAmount); msg.innerText = `${amtVal} ${fromCurr.value} = ${finalAmount} ${toCurr.value}`; + console.log(msg); }; const updateFlag = (element) => { @@ -49,11 +77,14 @@ const updateFlag = (element) => { img.src = newSrc; }; -btn.addEventListener("click", (evt) => { - evt.preventDefault(); - updateExchangeRate(); +btn.addEventListener("click", async (evt) => { + evt.preventDefault(); // Prevent the default form submission behavior + + // Update the exchange rate + await updateExchangeRate(); }); + window.addEventListener("load", () => { updateExchangeRate(); -}); +}); \ No newline at end of file diff --git a/CurrencyConverter/index.html b/CurrencyConverter/index.html index 40ceb46..23f6289 100644 --- a/CurrencyConverter/index.html +++ b/CurrencyConverter/index.html @@ -3,8 +3,8 @@ - Currency Converter - + Currency-Converter +

Currency Converter

-
+
-

Enter Amount

- +

Enter amount

+

From

- - + loading +
- +

To

- - + loading +
-
1USD = 80INR
- +
1 USD = 80 INR
+
diff --git a/CurrencyConverter/style.css b/CurrencyConverter/style.css index 2a2165a..b5548d7 100644 --- a/CurrencyConverter/style.css +++ b/CurrencyConverter/style.css @@ -46,7 +46,7 @@ form input { margin-top: 2rem; } -.dropdown i { +.dropdown button { font-size: 1.5rem; margin-top: 1rem; } From 8ce43f0af908d25fb1f5e0100cbd74a5bd28d3fe Mon Sep 17 00:00:00 2001 From: rahman-cs-it Date: Wed, 20 Mar 2024 11:38:45 +0530 Subject: [PATCH 2/2] successfully solve the api error --- CurrencyConverter/app.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/CurrencyConverter/app.js b/CurrencyConverter/app.js index 248ace8..3c527d7 100644 --- a/CurrencyConverter/app.js +++ b/CurrencyConverter/app.js @@ -54,19 +54,19 @@ const updateExchangeRate = async () => { amtVal = 1; amount.value = "1"; } - console.log(amount.value); + // console.log(amount.value); const URL = `${BASE_URL}/${fromCurr.value.toLowerCase()}.json`; let response = await fetch(URL); let data = await response.json(); - console.log(data) + // console.log(data) let rate = data[fromCurr.value.toLowerCase()][toCurr.value.toLowerCase()]; - console.log(data); + // console.log(data); let finalAmount = amtVal * rate; - console.log(finalAmount); + // console.log(finalAmount); msg.innerText = `${amtVal} ${fromCurr.value} = ${finalAmount} ${toCurr.value}`; - console.log(msg); + // console.log(msg); }; const updateFlag = (element) => {