script.js

const BASE_URL = "https://latest.currency-api.pages.dev/v1/currencies";
// const BASE_URL = "https://2024-03-06.currency-api.pages.dev/v1/currencies";
// const BASE_URL = "https://raw.githubusercontent.com/WoXy-Sensei/currency-api/main/api";
// const BASE_URL = "https://raw.githubusercontent.com/WoXy-Sensei/currency-api/main/api/USD_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");

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

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;
    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", async(evt) => {
    evt.preventDefault();
    updateExchangeRate();

});

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 URL = `${BASE_URL}/${fromCurr.value.toLowerCase()}.json`;
    let response = await fetch(URL);
    let data = await response.json();
    console.log(data);
    let rate = data[toCurr.value.toLowerCase()];
    // console.log(rate);

    let finalAmount = (data[fromCurr.value.toLowerCase()][toCurr.value.toLowerCase()] * parseInt(amtVal)).toFixed(2);
    // console.log(finalAmount);
    msg.innerText = `${amtVal} ${fromCurr.value}  =  ${finalAmount} ${toCurr.value}`
}