Where In The World

General
1

REST Countries API challenge

Your challenge is integrating with the REST Countries API to pull country data and display it on your homepage.

You can use any JavaScript framework/library on the front-end. You also have complete control over which packages you use to make HTTP requests.

Your users should be able to:

  • See all countries from the API on the homepage
  • Search for a country or capital using an input field
  • Filter countries by region
  • Click on a country to see more detailed information on a separate page
  • Click through to the border countries on the detail page
  • View the optimal layout for the interface depending on their device’s screen size
  • Bonus: Toggle the color scheme between light and dark mode

Post your awesome ‘where in the world apps’ here in this thread.

here is a link to the API

3 Likes
2

Not sure if you wanted any feedback, but the United States Minor Outlying Islands fails to load. Preloader spins indefinitely. Tested in Chrome 109.0.5414 and Firefox 115.4.0 on Windows 7.

It would also be good if the back button remembered the scroll position on the home page (it always takes you back to the top.)

3

Thank you, it’s the data from the countries API that has wrong coordinates or missing for many islands. I did a quick fix so if the coordinates missing, it show the flag instead.

I have no problem with the back button, it using the history.back() so it takes me to the previous page without reload the page so the scroll position is right

4

I figured out why it was happening on my system. I have the Ghostery extension installed in Chrome. Apparently, this was causing the page to reload when I clicked back button (or used the browser’s back button.) When I disabled the Ghostery extension, it worked as you described.