JavaScript

<div class="container">
  <div id="country-info">
    <h2>Enter Currency Code:</h2>
    <form id="country-form">
      <input type="text" id="currency-code" placeholder="Enter currency code" required>
      <button id="country-form-button" type="submit">Check</button>
    </form>
    <span id="intro-text"></span>
    <span id="list-of-countries"></span>
  </div>
</div>

.container {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

#country-info {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 20px;
text-align: center;
}

h2 {
margin-top: 0;
}

input[type="text"] {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
margin-right: 10px;
}

button[type="submit"] {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}

button[type="submit"]:hover {
background-color: #0056b3;
}

#intro-text {
display: block;
margin-top: 20px;
font-weight: bold;
}

#list-of-countries {
display: block;
margin-top: 10px;
font-size: 14px;
}

const countryForm = document.getElementById('country-form');
const currencyCodeInput = document.getElementById('currency-code');
const introTextSpan = document.getElementById('intro-text');
const listOfCountriesSpan = document.getElementById('list-of-countries');

const findTheCountry = (countryDetails) => {
  const countryNames = countryDetails.map(country => country.name.common).join(', ');

  if (countryDetails.length > 1) {
    introTextSpan.textContent = "You could be in any of these countries:";
  } else {
    introTextSpan.textContent = "You are currently in ";
  }
  listOfCountriesSpan.textContent = countryNames;
}


const fetchCountryInfo = async (currencyCode) => {
  const CURRENCY_API_ENDPOINT = '';
  try {
    // Write your code below this

    findTheCountry(countryDetails);


  } catch (error) {
    introTextSpan.textContent = Error: ${error.message};
    listOfCountriesSpan.textContent = "";
  }
};

countryForm.addEventListener('submit', (event) => {
  event.preventDefault();
  const currencyCode = currencyCodeInput.value.trim();
  if (currencyCode) {
    introTextSpan.textContent = "Loading...";
    fetchCountryInfo(currencyCode);
  } else {
    introTextSpan.textContent = 'Please enter a currency code.';
    listOfCountriesSpan.textContent = "";
  }
});

const countryForm = document.getElementById('country-form');
const currencyCodeInput = document.getElementById('currency-code');
const introTextSpan = document.getElementById('intro-text');
const listOfCountriesSpan = document.getElementById('list-of-countries');

const findTheCountry = (countryDetails) => {
  const countryNames = countryDetails.map(country => country.name.common).join(', ');

  if (countryDetails.length > 1) {
    introTextSpan.textContent = "You could be in any of these countries:";
  } else {
    introTextSpan.textContent = "You are currently in ";
  }
  listOfCountriesSpan.textContent = countryNames;
}


const fetchCountryInfo = async (currencyCode) => {
  const CURRENCY_API_ENDPOINT = 'https://restcountries.com/v3.1/currency';
  try {
    const response = await fetch(`${CURRENCY_API_ENDPOINT}/${currencyCode}`);
    if (!response.ok) {
      throw new Error('Failed to fetch country data');
    }
    const countryDetails = await response.json();
    findTheCountry(countryDetails);


  } catch (error) {
    introTextSpan.textContent = `Error: ${error.message}`;
    listOfCountriesSpan.textContent = "";
  }
};

countryForm.addEventListener('submit', (event) => {
  event.preventDefault();
  const currencyCode = currencyCodeInput.value.trim();
  if (currencyCode) {
    introTextSpan.textContent = "Loading...";
    fetchCountryInfo(currencyCode);
  } else {
    introTextSpan.textContent = 'Please enter a currency code.';
    listOfCountriesSpan.textContent = "";
  }
});