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

REST Countries API with color theme switcher using React, Sass

André 120

@AndreDev12

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


I can't find the logic development when clicking on the border countries from the details page. As I would do it?

Community feedback

@veljkoilic

Posted

Hey, there! I recently completed this challenge and commented this same thing elsewhere. I thought it was annoying too, but it's actually not that hard.

Every country has a "borders" property, with cca3 codes in them. You can use those country codes to query the API. Take a look at the API docs, you'll find the "List of codes" segment. https://restcountries.com/v3.1/alpha?codes={code},{code},{code}

So all you need to do when the page loads is take the "borders" property and insert the cca3 codes into the API endpoint like so: https://restcountries.com/v3.1/alpha?codes=col,pe,at

This will return the countries with those cca3 codes. You can then use those objects to render the full names of the countries, and make them into links.

My function looked something like this: axios.get(https://restcountries.comv3.1alpha?codes=${country.borders.join(",")}).then(function (response) { setborderCountries(response.data); });

Hope this helps! Good luck :)

Marked as helpful

0

André 120

@AndreDev12

Posted

@veljkoilic I was able to solve the requirement with your shared logic. Thank you very much.

0
P
MarcinFiuk 260

@MarcinFiuk

Posted

Hi André,

Nice solution, everything looks ok, however, when I went through your preview side I noticed that when you use one filter (e.g. pick up all the countries in Europe) and next tape a name in second input (e.g. Portugal or Germany) it start infinite fetch.

0

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