@wfarre
Posted
Regarding the "border countries", I fetched the all countries one more and stocked the name and the abbreviation in an array of objects. (countryNames = [ {abbrev: FRA, name: France}, {abbrev:GER, name: Germany} ... ] ) To improve performance, on the home page, when I did the fetch of all data, I created my "countryNames" array and I stored it in the localStorage. Then, you access the country's details, if there is "countryNames", you can change use it, else, you have to fetch all the countries' data.
I struggle with the API as well, the data were difficult to deal with. I recommend you to use design patterns, you can organize the data the way you want and put the logic to get the data in a different file. Design patterns are very useful to make your code stronger, if you change your API, you don't have to change all the logic in your main code. https://www.freecodecamp.org/news/javascript-design-patterns-explained/ Instead of writing "country.name.common", you can just write "country.name". It was very useful, for the the native name.
To sum up (because I am not sure, it is super clear):
- fetch all the countries one more time and create an array of object [{abbrev: FRA, name:France}]
- try to learn design patterns (I think it was very helpful to organize the data)
Regarding the design, to have more precise measures, you can use Gimp or photopea.
