Skip to content
Submitted over 4 years ago

REST Countries API in React

George Hobbs•310
@georgehobbs
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

There are a couple of known bugs which I'd appreciate any comments about:

  1. When navigating 'Back' to the root directory from a country-specific page, the app breaks. I'm unsure about my implementation of the different routes - it seems the whole page reloads when a 'border' button is hit. I've seen other solutions which only re-render the flag/text etc, making for a much smoother experience. How would I do this?

  2. When searching for a country and only returning one card (eg 'France') the card aligns to the right of the page. I used Semantic UI with the className 'ui centered card' but it aligns to the right. Ideally the card would be left-aligned.

Thanks

Community feedback

  • Roman Filenko•3,335
    @rfilenkoPosted over 4 years ago

    Hi George, to solve css issue with card position - class .ui.centered.card { margin-left: auto;}, its flex-item so it pushes the card to the right. You need to overwrite this rule. As for back button - function goBack() { window.history.back(); } this causes page reload, you should destructure history from react router dom and use it instead, like this history.goBack(). Also make the whole country card clickable😉

    Roman

    0

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