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

@Abdelghafour122

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


This challenge wasn't easy, it was challenging but very fun, i learned how to make dark/light themes with CSS variables and the basics of react router.

Note: the flags may look a bit weird because they're not the same size

Update:

  • I improved the navigation, now border countries are accessible.
  • Added a "Back to home" Button.
  • Added an "All Regions" option to re-fetch all countries after fetching a certain region.

If you guys have any suggestions on how i can improve my code please let me know, thank you!

Community feedback

Travolgi 🍕 31,420

@denielden

Posted

Hi Abdelghafour, great work on this challenge! 😉

Here are a few tips for improve your code:

  • add main tag and wrap the cards for improve the Accessibility
  • to make it look as close to the design as possible add padding-inline: 2rem to App class
  • instead of using px use relative units of measurement like rem -> read here
  • if you want to use the title for the href attribute you have to parse it in url, it can give problems creating links with empty spaces or special characters
  • I would also add a query reset button, I find it very convenient... very easy
  • in the filters there is no way to return to all countries after choosing a region, add an entry "all region"
  • to make all flag images the same height use the object-fit: cover property

Overall you did well 😁 Hope this help!

Marked as helpful

1

@Abdelghafour122

Posted

@denielden thank you!

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