Submitted over 2 years ago

REST Countries API with color theme switcher

Abdelghafour•580

@Abdelghafour122

Preview site View code

This is a solution for...REST Countries API with color theme switcher

HTML
CSS
JS
API

4advanced

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,400
@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 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
Abdelghafour•580
@Abdelghafour122Posted over 2 years ago
@denielden thank you!
1

Please log in to post a comment

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