Update app.js

The API URI is changed, so the old method to fetch rate from the api is not working, this is a solution for the problem, all country rates converting with the updated base URI and the rate value set to let rate = fromData[fromCurr.value.toLowerCase()][toCurr.value.toLowerCase()]

Author: vsshetty90

CurrencyConverter/app.js

@@ -1,59 +1,59 @@
-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@2025.3.14/v1/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);
-  });
+for(let select of dropdowns) {
+    for (currCode in countryList) {
+        let newOption = document.createElement("option");
+        newOption.innerText = currCode;
+        newOption.value = currCode;
+        select.append(newOption);
+        if(select.name === "from" && currCode === "USD") {
+            newOption.selected = "selected";
+        } else if(select.name === "to" && currCode === "INR") {
+            newOption.selected = "selected";
+        }
+    }   
+
+    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 fromURL = `${BASE_URL}/${fromCurr.value.toLowerCase()}.json`;
+    let fromResponse = await fetch(fromURL);
+    let fromData = await fromResponse.json();
+    let rate = fromData[fromCurr.value.toLowerCase()][toCurr.value.toLowerCase()];
+    let finalAmount = amtVal * rate;
+    msg.innerText = `${amtVal} ${fromCurr.value} = ${finalAmount.toFixed(2)} ${toCurr.value}`;   
 }
 
-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}`;
-};
 
 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;
-};
+    let currCode = element.value;
+    let countryCode = countryList[currCode]; 
+    let newSrc = `https://flagsapi.com/${countryCode}/shiny/64.png`;
+    let img = element.parentElement.querySelector("img");
+    img.src = newSrc;
+}
 
 btn.addEventListener("click", (evt) => {
-  evt.preventDefault();
-  updateExchangeRate();
+    evt.preventDefault();
+    updateExchangeRate();
 });
 
+
 window.addEventListener("load", () => {
-  updateExchangeRate();
-});
+    updateExchangeRate();
+})