main.js

console.log("Working... ");

const BASE_URL = "https://v6.exchangerate-api.com/v6/b51e96c5327f478884823b73/latest/";

const dropdown = document.querySelectorAll(".dropdown select");
const btn = document.querySelector("form button");
const fromCurr = document.querySelector(".from select");
const toCurr = document.querySelector(".to select");

for (let select of dropdown) {
    for (let currency_code in countryList) {
        let option = document.createElement("option");
        option.value = currency_code;
        option.innerText = `${currency_code} (${countryList[currency_code].currency})`; // Display currency code and name
        if (select.name === "from" && currency_code === "USD") {
            option.selected = true;
        } else if (select.name === "to" && currency_code === "INR") {
            option.selected = true;
        }
        select.append(option);
    }
    select.addEventListener("change", (evt) => {
        updateFlag(evt.target); // Update the flag when the dropdown value changes
    });
}

const updateFlag = (element) => {
    let currCode = element.value;
    let countryCode = countryList[currCode]?.country; // Access the 'country' property from the new structure
    if (countryCode) {
        let newSrc = `https://flagsapi.com/${countryCode}/flat/64.png`; // Update the flag source based on the selected currency
        element.parentElement.querySelector("img").src = newSrc;
    } else {
        console.error(`Country code not found for currency: ${currCode}`);
    }
};

btn.addEventListener("click", async (e) => {
    e.preventDefault(); // Prevent form submission
    let inputField = document.querySelector("form input");
    let amount = inputField.value; // Get the amount entered by the user
    if (amount === "" || amount < 1) {
        amount = 1; // Set default amount to 1 if invalid
        inputField.value = amount; // Update the input field value
    }

    const URL = `${BASE_URL}/${fromCurr.value}`; // Construct the API URL based on selected currency

    try {
        const response = await fetch(URL); // Fetch the exchange rate data
        const data = await response.json(); // Parse the JSON response

        if (data && data.conversion_rates) {
            const fromRate = data.conversion_rates[fromCurr.value]; // Get the rate for the "from" currency
            const toRate = data.conversion_rates[toCurr.value]; // Get the rate for the "to" currency

            if (toRate) {
                const exchangeRate = toRate; // Exchange rate from "fromCurr" to "toCurr"
                const convertedAmount = (amount * exchangeRate).toFixed(2); // Calculate the converted amount

                // Display the exchange rate and converted amount in the .msg container
                const msgContainer = document.querySelector(".msg");
                msgContainer.innerText = `1 ${fromCurr.value} = ${exchangeRate} ${toCurr.value}\n${amount} ${fromCurr.value} = ${convertedAmount} ${toCurr.value}`;
            } else {
                alert("Exchange rate for the selected currency is not available.");
            }
        } else {
            alert("Failed to fetch exchange rates. Please try again later.");
        }
    } catch (error) {
        console.error("Error fetching exchange rates:", error);
        alert("An error occurred while fetching exchange rates.");
    }
});

const swapIcon = document.querySelector(".fa-arrow-right-arrow-left");

swapIcon.addEventListener("click", () => {
    // Swap the selected values of the dropdowns
    const tempValue = fromCurr.value;
    fromCurr.value = toCurr.value;
    toCurr.value = tempValue;

    // Trigger the change event to update the flags
    updateFlag(fromCurr);
    updateFlag(toCurr);
});