Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

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

#react#sass/scss#react-router

@igor-ostojic

Desktop design screenshot for the REST Countries API with color theme switcher coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
4advanced
View challenge

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,460

@denielden

Posted

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

Posted

@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

@legion40216

Posted

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

Posted

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

0
Marco 320

@marcoberdiano

Posted

Nice effort! well done!

1

Please log in to post a comment

Log in with GitHub
Discord logo

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