HTML CSS JS API-call

hi dusan, congratulations for completing this challenge! here are some suggestions I can give to you:

• I have noticed that once the user filters countries by region, there's no way to get back to all countries, think about adding an 'all' button

• you can improve accessibility by making your interactive elements focusable ( like your countries cards, the filters country button ...), it can be done by giving them a tabindex of 0

• think about using the right html element for the right purpose ( your toggle theme button for instance is a paragraph!, think about making it a button, which is even naturally focusable)

• the countries' borders in your app are cca3 codes which is not very informative for the user, you can use this function to get the real names of the corresponding borders

const getBordersNames = function (arrayOfBordersCca3Codes, countries) {
   if (arrayOfBordersCca3Codes) 
       return countries
           .filter((country) => arrayOfBordersCca3Codes.includes(country.cca3))
           .reduce(
               (arrayOfBordersNames, currentObject) =>
                   arrayOfBordersNames.concat(currentObject.name.common),
               []
           )
   else return null} 

hope it helps

hey i noticed that the countries at first werent alphabetically ordered a way you can do this is by sorting the allcountries object with this

.sort(function (a, b) {
    if (a.name.common < b.name.common) {
      return -1;
    }
    if (a.name.common > b.name.common) {
      return 1;
    }
    return 0;
  });