Fixed Api Issue

CurrencyConverter/app.js

@@ -1,12 +1,13 @@
 const BASE_URL =
-  "https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies";
+  "https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies/eur.json";
 
 const dropdowns = document.querySelectorAll(".dropdown select");
 const btn = document.querySelector("form button");
 const fromCurr = document.querySelector(".from select");
 const toCurr = document.querySelector(".to select");
 const msg = document.querySelector(".msg");
 
+// Populate dropdowns with currency options
 for (let select of dropdowns) {
   for (currCode in countryList) {
     let newOption = document.createElement("option");
@@ -25,22 +26,41 @@ for (let select of dropdowns) {
   });
 }
 
+// Fetch exchange rates and update message
 const updateExchangeRate = async () => {
   let amount = document.querySelector(".amount input");
   let amtVal = amount.value;
   if (amtVal === "" || amtVal < 1) {
     amtVal = 1;
     amount.value = "1";
   }
-  const URL = `${BASE_URL}/${fromCurr.value.toLowerCase()}/${toCurr.value.toLowerCase()}.json`;
-  let response = await fetch(URL);
-  let data = await response.json();
-  let rate = data[toCurr.value.toLowerCase()];
 
-  let finalAmount = amtVal * rate;
-  msg.innerText = `${amtVal} ${fromCurr.value} = ${finalAmount} ${toCurr.value}`;
+  try {
+    let response = await fetch(BASE_URL);
+    let data = await response.json();
+
+    // Convert currency values to lowercase for consistency with the API data
+    let fromCurrencyCode = fromCurr.value.toLowerCase();
+    let toCurrencyCode = toCurr.value.toLowerCase();
+
+    // Get the rates for the selected currencies
+    let fromRate = data.eur[fromCurrencyCode]; // 'fromCurr' value relative to EUR
+    let toRate = data.eur[toCurrencyCode]; // 'toCurr' value relative to EUR
+
+    // Calculate conversion rate: EUR -> fromCurr and EUR -> toCurr
+    let rate = toRate / fromRate;
+    let finalAmount = amtVal * rate;
+
+    msg.innerText = `${amtVal} ${fromCurr.value} = ${finalAmount.toFixed(2)} ${
+      toCurr.value
+    }`;
+  } catch (error) {
+    console.error("Error fetching exchange rates:", error);
+    msg.innerText = "Error: Unable to retrieve exchange rates.";
+  }
 };
 
+// Update flag image when currency changes
 const updateFlag = (element) => {
   let currCode = element.value;
   let countryCode = countryList[currCode];