Chosing one Element out of a paragraph with api

i’m experimenting with api’s and now tried to display the capital and borders of a country with this api on a card. This worked.

Now i want to add a function so if you click on one of the borderneighbors it opens their card.

For example i’m on germany now and on neighbors there is written : AUT,BEL,CZE,DNK,FRA,LUX,NLD,POL,CHE

If i click on Pol , i want it to open the card of Poland and show the same informations of Poland. So i made another function where i tried to get the alphaCode of the border countries when i click on them.

I console logged that and saw it’s always giving me AUT,BEL,CZE,DNK,FRA,LUX,NLD,POL,CHE when i click on only one country. So i wanted to know how I can make it only choose one country instead of all.

const getCountryButton = document.getElementById('get-country-info-btn');
const countryInput = document.getElementById('country-name');
const countryDetails = document.getElementsByClassName('country-details')[0]; // <div>

getCountryButton.addEventListener('click', function() {
const inputValue = countryInput.value || 'Germany';
getCountryInfo(inputValue);
});

function getCountryInfo(country) {
fetch(`https://restcountries.eu/rest/v2/name/${country}`)
.then(response => response.json())
.then(data => {
  clearCountryDetails();
  displayCountryDetails(data);
  console.log(data)
});
}

function clearCountryDetails() {
countryDetails.innerHTML = '';
}

function displayCountryDetails(countryData) {
const name = countryData[0].name;
const code = countryData[0].alpha2Code;
const capital = countryData[0].capital;
const flagUrl = countryData[0].flag;
const borders = countryData[0].borders;

const flagImage = document.createElement('img');
flagImage.setAttribute('src', flagUrl);
flagImage.classList.add('flag');
countryDetails.appendChild(flagImage);

const countryHeader = document.createElement('h2');
countryHeader.innerHTML = `${name} (${code})`;
countryDetails.appendChild(countryHeader);

const capitalParagraph = document.createElement('p');
capitalParagraph.innerHTML = `Capital: ${capital}`;
countryDetails.appendChild(capitalParagraph);

const borderParagraph = document.createElement('span');
borderParagraph.className = "borders";
borderParagraph.innerHTML = `Borders: ${borders}`;
countryDetails.appendChild(borderParagraph);
borderParagraph.addEventListener('click', function () {
  getCountryBorders(borders)
})


}

function getCountryBorders(alphaCode) {
fetch(`https://restcountries.eu/rest/v2/alpha/${alphaCode}`)
.then(response => response.json())
.then(data => {
  displayCountryDetails(alphaCode);
  console.log(data)
});
}

Answer

borders is an array. You can add a button or link for each element in the array.

const getCountryButton = document.getElementById('get-country-info-btn');
const countryInput = document.getElementById('country-name');
const countryDetails = document.getElementsByClassName('country-details')[0];

document.getElementById("get-country-info-btn").onclick = (e) => {
  fetchCountryDetails(countryInput.value);
};

// Fetch country details based on country name
function fetchCountryDetails(country) {
  fetch(`https://restcountries.eu/rest/v2/name/${country}`)
    .then(response => response.json())
    .then(data => {
      clearCountryDetails();
      displayCountryDetails(data);
    });
}

function clearCountryDetails() {
  countryDetails.innerHTML = '';
}

// Display the data
function displayCountryDetails(countryData) {
  const name = countryData[0].name;
  const code = countryData[0].alpha2Code;
  const capital = countryData[0].capital;
  const flagUrl = countryData[0].flag;
  const borders = countryData[0].borders;

  const flagImage = document.createElement('img');
  flagImage.setAttribute('src', flagUrl);
  flagImage.classList.add('flag');
  countryDetails.appendChild(flagImage);

  const countryHeader = document.createElement('h2');
  countryHeader.innerHTML = `${name} (${code})`;
  countryDetails.appendChild(countryHeader);

  const capitalParagraph = document.createElement('p');
  capitalParagraph.innerHTML = `Capital: ${capital}`;
  countryDetails.appendChild(capitalParagraph);

  const borderParagraph = document.createElement('span');
  borderParagraph.className = "borders";
  createBorderData(borders, borderParagraph);
  countryDetails.appendChild(borderParagraph);
}

// Helper function to create buttons from array
function createBorderData(borders, parent) {
  const label = document.createElement('span');
  label.innerHTML = "Borders: ";
  parent.appendChild(label);
  borders.forEach((b) => {
    let btn = document.createElement("button");
    btn.innerHTML = b;
    btn.onclick = getCountryBorders;
    parent.appendChild(btn);
  });
}

function getCountryBorders(e) {
  const alphaCode = e.srcElement.innerHTML;
  // Get the country name from the code
  fetch(`https://restcountries.eu/rest/v2/alpha/${alphaCode}`)
    .then(response => response.json())
    .then(data => {
      fetchCountryDetails(data.name);
    });
}

.flag {
  width: 100px;
  height: 100pxl
}

<input type="text" id="country-name">
<button id="get-country-info-btn">
Get data
</button>
<div class="country-details"></div>