Fix: Resolved currency conversion issue

dhairyagothi · Jan 21, 2025 · 90e91a4 · 90e91a4
1 parent 1966e7a
commit 90e91a4
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 51 deletions.
diff --git a/public/Exchange_Currency/app.js b/public/Exchange_Currency/app.js
@@ -1,5 +1,5 @@
-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 FALLBACK_URL = "https://latest.currency-api.pages.dev/v1/currencies";
 
 const dropdowns = document.querySelectorAll(".dropdown select");
 const btn = document.querySelector("form button");
@@ -8,7 +8,7 @@ const toCurr = document.querySelector(".to select");
 const msg = document.querySelector(".msg");
 
 for (let select of dropdowns) {
-  for (currCode in countryList) {
+  for (let currCode in countryList) {
     let newOption = document.createElement("option");
     newOption.innerText = currCode;
     newOption.value = currCode;
@@ -32,21 +32,40 @@ const updateExchangeRate = async () => {
     amtVal = 1;
     amount.value = "1";
   }
-  const URL = `${BASE_URL}/${fromCurr.value.toLowerCase()}/${toCurr.value.toLowerCase()}.json`;
-  let response = await fetch(URL);
+  const URL = `${BASE_URL}/${fromCurr.value.toLowerCase()}.json`;
+  const FALLBACK_API_URL = `${FALLBACK_URL}/${fromCurr.value.toLowerCase()}.json`;
+
+  let response;
+  try {
+    response = await fetch(URL);
+    if (!response.ok) {
+      throw new Error("Failed to fetch exchange rate from primary API.");
+    }
+  } catch (error) {
+    console.warn(error);
+    try {
+      response = await fetch(FALLBACK_API_URL);
+      if (!response.ok) throw new Error("Failed to fetch exchange rate from fallback API.");
+    } catch (error) {
+      msg.innerText = "Error: Unable to fetch exchange rate.";
+      console.error(error);
+      return;
+    }
+  }
+
   let data = await response.json();
-  let rate = data[toCurr.value.toLowerCase()];
+  let rate = data[fromCurr.value.toLowerCase()][toCurr.value.toLowerCase()];
 
   let finalAmount = amtVal * rate;
-  msg.innerText = `${amtVal} ${fromCurr.value} = ${finalAmount} ${toCurr.value}`;
+  msg.innerText = `${amtVal} ${fromCurr.value} = ${finalAmount.toFixed(2)} ${toCurr.value}`;
 };
 
 const updateFlag = (element) => {
   let currCode = element.value;
   let countryCode = countryList[currCode];
   let newSrc = `https://flagsapi.com/${countryCode}/flat/64.png`;
   let img = element.parentElement.querySelector("img");
-  img.src = newSrc;
+  if (img) img.src = newSrc;
 };
 
 btn.addEventListener("click", (evt) => {
@@ -56,4 +75,4 @@ btn.addEventListener("click", (evt) => {
 
 window.addEventListener("load", () => {
   updateExchangeRate();
-});
+});
diff --git a/public/Exchange_Currency/index.html b/public/Exchange_Currency/index.html
@@ -1,49 +1,42 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Currency Converter</title>
-    <link href="style.css" rel="stylesheet" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
-      integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
-      crossorigin="anonymous"
-      referrerpolicy="no-referrer"
-    />
-
-  </head>
-  <body>
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+</head>
+<body>
     <div class="container">
-      <h2>Currency Converter</h2>
-      <form>
-        <div class="amount">
-          <p>Enter Amount</p>
-          <input value="1" type="text" />
-        </div>
-        <div class="dropdown">
-          <div class="from">
-            <p>From</p>
-            <div class="select-container">
-              <img src="https://flagsapi.com/US/flat/64.png" />
-              <select name="from"></select>
+        <h2>Currency Converter</h2>
+        <form action="">
+            <div class="amount">
+                <p>Enter Amount</p>
+                <input value="1" type="text">
             </div>
-          </div>
-          <i class="fa-solid fa-arrow-right-arrow-left"></i>
-          <div class="to">
-            <p>To</p>
-            <div class="select-container">
-              <img src="https://flagsapi.com/IN/flat/64.png" />
-              <select name="to"></select>
+            <div class="dropdown">
+                <div class="from">
+                    <p>From</p>
+                    <div class="select-container">
+                        <img src="https://flagsapi.com/US/flat/64.png">
+                        <select name="from"></select>
+                    </div>
+                </div>
+                <i class="fa-solid fa-arrow-right-arrow-left"></i>
+                <div class="to">
+                    <p>To</p>
+                    <div class="select-container">
+                        <img src="https://flagsapi.com/IN/flat/64.png">
+                        <select name="to"></select>
+                    </div>
+                </div>
             </div>
-          </div>
-        </div>
-        <div class="msg">1USD = 80INR</div>
-        <button>Get Exchange Rate</button>
-      </form>
+            <div class="msg">1USD = 80INR</div>
+            <button>Get Exchange Rate</button>
+        </form>
     </div>
     <script src="data.js"></script>
     <script src="app.js"></script>
-  </body>
+</body>
 </html>
diff --git a/public/Exchange_Currency/style.css b/public/Exchange_Currency/style.css
@@ -23,9 +23,7 @@
     margin: 2rem 0 1rem 0;
   }
 
-  form select,
-  button,
-  input {
+  form select,button,input {
     width: 100%;
     border: none;
     outline: none;