Submitted over 2 years ago
REST Countries API with color theme switcher
@Abdelghafour122
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
- @denieldenPosted over 2 years ago
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
toApp
class - instead of using
px
use relative units of measurement likerem
-> read here - if you want to use the title for the
href
attribute you have to parse it inurl
, 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 helpful1 - add
Please log in to post a comment
Log in with GitHubJoin 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