Skip to content
Submitted over 3 years ago

REST Countries API using React

axios, react, react-router
Nakoya Wilson•1,530
@nakoyawilson
A solution to the REST Countries API with color theme switcher challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

The thing I struggled with the most for this project is the Filter by Region dropdown menu. I originally used a <select> element until I realised I wouldn't be able to style it. Then I created a custom dropdown menu but was uncertain how to make it accessible so I ultimately switched back to the <select> element. If anyone has any feedback/suggestions on how best to implement the Filter by Region dropdown menu, please let me know.

I'd also appreciate any advice/thoughts/suggestions on wrapping the card in an anchor tag. I've read that putting that much content in an anchor tag is bad practice with respect to accessibility but I wasn't sure how else to implement clicking to see more detailed information about a country and making the clickable element obvious.

Code

Please log in to post a comment

Log in

Community feedback

  • Travolgi 🍕•31,280
    @denielden

    Hi Nakoya, great work on this challenge! 😉

    Here are a few tips for improve your code:

    • remove all unnecessary code, the less you write the better as well as being clearer: for example the div container of flag image
    • 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"
    • for the details of countries you can use ul istead a multiple p
    • if I open a country that has some undefined data, such as Antarctica, the details page crash and remains blank because it cannot cycle through non-existent data. Add a pre-check of the data before cycling it
    • using a is fine, alternatively you can hook a click event with javascript on cards

    Overall you did well 😁 Hope this help!

    Marked as helpful

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