Refactor currency exchange API integration

CurrencyConverter/app.js

@@ -25,22 +25,84 @@ for (let select of dropdowns) {
   });
 }
 
+const BASE_URL =
+  "https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies";
+
+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");
+
+for (let select of dropdowns) {
+  for (currCode in countryList) {
+    let newOption = document.createElement("option");
+    newOption.innerText = currCode;
+    newOption.value = currCode;
+    if (select.name === "from" && currCode === "USD") {
+      newOption.selected = "selected";
+    } else if (select.name === "to" && currCode === "INR") {
+      newOption.selected = "selected";
+    }
+    select.append(newOption);
+
+
+  select.addEventListener("change", (evt) => {
+    updateFlag(evt.target);
+  });
+}
 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}`;
+  // 1. Updated URL: The new API uses /v1/currencies/{from}.json
+  const fromCode = fromCurr.value.toLowerCase();
+  const toCode = toCurr.value.toLowerCase();
+  const URL = `https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies/${fromCode}.json`;
+
+  try {
+    let response = await fetch(URL);
+
+    if (!response.ok) {
+        msg.innerText = "Error fetching exchange rate.";
+        return;
+    }
+
+    let data = await response.json();
+
+    // 2. Updated Data Access: The new API returns { "usd": { "inr": 83.5 } }
+    let rate = data[fromCode][toCode];
+
+    let finalAmount = (amtVal * rate).toFixed(2);
+    msg.innerText = `${amtVal} ${fromCurr.value} = ${finalAmount} ${toCurr.value}`;
+  } catch (error) {
+    msg.innerText = "Failed to load data. Check your internet.";
+    console.error(error);
+  }
+};
+
+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;
 };
 
+btn.addEventListener("click", (evt) => {
+  evt.preventDefault();
+  updateExchangeRate();
+});
+
+window.addEventListener("load", () => {
+  updateExchangeRate();
+});
+}
+
 const updateFlag = (element) => {
   let currCode = element.value;
   let countryCode = countryList[currCode];