responsive country-info app

Hi there 👋, good job on completing the challenge.

The information about the borders is provided by the Rest Countries API, there's a field called borders that you can request just like you did with the rest:

https://gitlab.com/restcountries/restcountries/-/blob/master/FIELDS.md

Now, I suggest you make a single request to the API instead of multiple for each field:

• Instead of all these calls

fetch(`${API_URL}/all?fields=name`);
fetch(`${API_URL}/all?fields=population`);
fetch(`${API_URL}/all?fields=region`);
fetch(`${API_URL}/all?fields=capital`);

• Just make one call and include all the fields you need

fetch(`${API_URL}/all?fields=flags,name,population,region,subregion,capital,tld,currencies,languages,borders,independent`);

This has a huge impact in your app's performance, let me give you an example:

const fields = 'flags,name,population,region,subregion,capital,tld,currencies,languages,borders,independent';
const url = `https://restcountries.com/v3.1/all?fields=${fields}`;

async function fetchData() {
  const res = await fetch(url);
  const countries = await res.json();

  // And now you can simply access the properties you need, without having to make any extra requests
  countries.forEach(country => {
    console.log(country.name, country.borders);
  })
}

fetchData();

Also, as you might have noticed, you should not use Promise.then() inside an async function, that's what the await keyword is for. You can read more about the proper use of async functions in this article:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

Remember you can also use the local data.json that comes with the challenge and fetch the data from there instead of using the API.

Hope you find this helpful 👍