how to get currency code or symbol using restcountries API

<div>
  <label for="country-name">Country Name:</label>
  <input type="text" id="country-name" name="country-name">
  <button id="get-currency-btn">Get Currency</button>
</div>

<div id="result"></div>

<script>
 document.addEventListener("DOMContentLoaded", function() {
  const getCurrencyBtn = document.getElementById("get-currency-btn");
  const countryNameInput = document.getElementById("country-name");
  const resultDiv = document.getElementById("result");

  getCurrencyBtn.addEventListener("click", function() {
    const countryName = countryNameInput.value;

    // Send AJAX request to REST Countries API
    fetch(`https://restcountries.com/v2/name/${countryName}?fullText=true`)
      .then(response => {
        if (!response.ok) {
          throw new Error("Country not found");
        }
        return response.json();
      })
      .then(data => {
        const currencyCode = data[0].currencies[0].symbol;
        resultDiv.textContent = currencyCode;
      })
      .catch(error => {
        resultDiv.textContent = error.message;
      });
  });
});
</script>

<div>
  <label for="country-name">Country Name:</label>
  <input type="text" id="country-name" name="country-name">
  <button id="get-currency-btn">Get Currency</button>
</div>

<div id="result"></div>
<script>
 document.addEventListener("DOMContentLoaded", function() {
  const getCurrencyBtn = document.getElementById("get-currency-btn");
  const countryNameInput = document.getElementById("country-name");
  const resultDiv = document.getElementById("result");

  getCurrencyBtn.addEventListener("click", function() {
    const countryName = countryNameInput.value;

    // Send AJAX request to REST Countries API
    fetch(`https://restcountries.com/v2/name/${countryName}?fullText=true`)
      .then(response => {
        if (!response.ok) {
          throw new Error("Country not found");
        }
        return response.json();
      })
      .then(data => {
        const currencyCode = data[0].currencies[0].code;
        resultDiv.textContent = currencyCode;
      })
      .catch(error => {
        resultDiv.textContent = error.message;
      });
  });
});
</script>

<select id="country-dropdown">
  <option value="">Select a country</option>
  <option value="United States">United States</option>
  <option value="Japan">Japan</option>
  <option value="France">France</option>
  <!-- add more countries as needed -->
</select>

<p>Currency Code: <span id="currency-code"></span></p>
</div>


<script>
document.addEventListener("DOMContentLoaded", function() {
  const dropdown = document.getElementById("country-dropdown");
  const currencyCode = document.getElementById("currency-code");

  dropdown.addEventListener("change", function() {
    const selectedCountry = dropdown.value;

    // Send AJAX request to REST Countries API
    fetch(`https://restcountries.com/v2/name/${selectedCountry}?fullText=true`)
      .then(response => {
        if (!response.ok) {
          throw new Error("Country not found");
        }
        return response.json();
      })
      .then(data => {
        const code = data[0].currencies[0].code;
        currencyCode.textContent = code;
      })
      .catch(error => {
        currencyCode.textContent = error.message;
      });
  });
});
</script>