Design comparison
Solution retrospective
Really had a difficult time with the "Border Countries". The design examples showed the country name and not the abbreviation. I ended up going with the abbreviation. I also had problems with filtering countries by region. My jQuery code would run in Firefox but not in Google Chrome, but I was able to write a code that executed in both browsers. This was an awesome challenge.
Community feedback
- @wfarrePosted almost 2 years ago
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.
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord