API is not working

[SoumodeepAuddy]

Please anyone suggest how to fix it...

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};
};

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();
});

[roycebarboz]

replace the app.js code with the following:
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 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";
}

// Corrected API URL
const URL = ${BASE_URL}/${fromCurr.value.toLowerCase()}.json;
let response = await fetch(URL);
let data = await response.json();

// Updated rate extraction
let rate = data[fromCurr.value.toLowerCase()][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;
};

btn.addEventListener("click", (evt) => {
evt.preventDefault();
updateExchangeRate();
});

window.addEventListener("load", () => {
updateExchangeRate();
});

[SoumodeepAuddy]

Doesn't work

[haseebdevpro]

my heroku account is not responding giving application error

[kunalghotekar]

Replace the app.js code and API with the following:

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 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 updateFlag = (element) => {
let currCode = element.value;
//console.log(currCode);
let countryCode = countryList[currCode];
let newSrc = https://flagsapi.com/${countryCode}/flat/64.png;
let img = element.parentElement.querySelector("img");
img.src = newSrc;

};

const updateExchangeRate = async () => {
let amount = document.querySelector(".amount input");
let amtVal = amount.value;
if (amtVal === "" || amtVal < 1) {
amtVal = 1;
amount.value = "1";
}

//console.log(fromCurr.value, toCurr.value);
const fromCurrency = fromCurr.value.toLowerCase();  // example: eur
const toCurrency = toCurr.value.toLowerCase();      // example: jpy

const URL = `${BASE_URL}/${fromCurrency}.json`;
//const QRL = `${BASE_URL}/${toCurr.value.toLowerCase()}.json`;
let response = await fetch(URL);
let data = await response.json();
let rate = data[fromCurrency][toCurrency];

let finalAmount = amtVal * rate;
// console.log(rate);
//  console.log(finalAmount);
msg.innerText = `${amtVal} ${fromCurr.value} = ${finalAmount} ${toCurr.value}`;

}

btn.addEventListener("click", (evt) => {
evt.preventDefault();
updateExchangeRate();

});
window.addEventListener("load", () => {
updateExchangeRate();
});