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

Countries app using react, react router dom,

Matthew Van Pelt• 575

@Mattvp21

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


Here it is... my first advanced solution!

I'm feeling very proud of myself for how far I've come and I am very grateful to Frontend Mentor for helping me throughout my coding journey!

I'd like to improve the style of the cards and wonder how I can get them to stay consistent when filtered out

The dropdown menu gave me problems and I just used a react bootstrap template for the styling. As far as the functionality goes, I was struggling to filter out the countries properly since the filter method kept slicing the original array I was using to render the countries. In the end, I figured out how to render them using the useEffect hook although I don't know if its the best way to do it.

Please leave feedback!

Happy coding!

--Matt

Community feedback

Gesiere• 780

@Gesiere

Posted

Well done matt on your first advance project here on frontend mentor. I know only little on react so unfortunately can't advice you on the right way to carry out the filter, but the current method works any ways. Where i have problem is the design of the project and also that dark "dark mode" on right side is too bold and the icon of the half moon should be an outline icon not a fill icon. You could reduce the font a bit. The background shadow are too pronounce. I mean it can be there but it's distracting. All the same well done you indeed should be proud of your self. Keep up the good work.

Marked as helpful

1

Matthew Van Pelt• 575

@Mattvp21

Posted

@Gesiere Yeah I could see how the fonts are a little big and cut the box shadow a bit. I see it's very pronounced on mobile. Thanks for the suggestions!

0

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