Skip to content
Submitted over 2 years ago

World Countries App made with React JS, SASS & REST Countries API

Igor Ostojic•300
@igor-ostojic
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...REST Countries API with color theme switcher
  • HTML
  • CSS
  • JS
  • API
4advanced

Design comparison

SolutionDesign

Solution retrospective

Really wanted to challenge myself and do this project as fast as possible. Took me about 4 hours of non stop coding / planning .

Will work on Dark Mode when I find the time !

I do have a question regarding the border countries on the "details" page. In the design file it is shown that the border countries have their full name displayed, however when you fetch the data from the API the "borders" array only has the short names for the countries. I'm wondering what would be the best way to display the full country name for the border countries.

Thanks in advance !

Community feedback

  • Travolgi 🍕•31,400
    @denieldenPosted over 2 years ago

    Hey Igor, congratulations on completing the challenge! You did a great job 😉

    Let me give you some little tips for optimizing your code:

    • use h2 or h3 element for the title of country instead of a p
    • use ul element for the details text of country instead of multiple p
    • if I type a query that doesn't give any results, nothing happens, try adding a "no results" message
    • I would also add a query reset button, I find it very convenient
    • in the filters there is no way to return to all countries after choosing a region, add an entry "all region"
    • add header tag and wrap the navbar for improve the Accessibility
    • remove all unnecessary code, the less you write the better as well as being clearer: for example the div container of image
    • check the data on the details page otherwise it will go into error if any data is missing as it happens in the Antartica page country

    Hope this help! Happy coding 😁

    Marked as helpful
    3
    Igor Ostojic•300
    @igor-ostojicPosted over 2 years ago

    @denielden Regarding the

    • "in the filters there is no way to return to all countries after choosing a region, add an entry "all region"

    I found it weird that the original design didn't show a "all region" option, and I always try to follow the challenge as close as possible

    Thanks for all the advice !

    1
  • Suleman•750
    @legion40216Posted over 2 years ago

    Yes, that is true the border countries have 3-letter country abbreviation you have to cycle through the Data and match the 3-letter abbreviation with corresponding same 3-letter country abbreviation of that country and get the name of the country and display it in the buttons.

    1
    Igor Ostojic•300
    @igor-ostojicPosted over 2 years ago

    @legion40216 I see you have found a solution on your challenge ! I will take a look, thanks !

    0
  • Marco•320
    @marcoberdianoPosted over 2 years ago

    Nice effort! well done!

    1

Please log in to post a comment

Log in with GitHub

Join 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