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

Responsive web app with theme

#react#react-router#sass/scss
WFarré 680

@wfarre

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

Community feedback

Travolgi 🍕 31,500

@denielden

Posted

Hello Wfarrè, You have done a good work! 😁

Some little tips to improve your code:

  • use article tag instead of a simple div to the container card of country for improve the Accessibility
  • remove all unnecessary code, the less you write the better as well as being clearer: for example the div container of flag images
  • use one class to body to change the all theme color of app
  • after, add transition on the body to smooth the change theme color
  • use ul element for the details text of country instead of multiple div and p
  • 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
  • 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"
  • instead of using px use relative units of measurement like rem -> read here

Keep learning how to code with your amazing solutions to challenges.

Hope this help 😉 and Happy coding!

Marked as helpful

0

WFarré 680

@wfarre

Posted

@denielden Thank you for your feedback. I still have some (a lot of) refactoring to do and also need to pass it through W3C validators. I like your tips using ul. Regarding the image wrapper, it's a tip I received from my mentor, I found it very useful. I find it very useful to dimension the image.

1
Travolgi 🍕 31,500

@denielden

Posted

@wfarre you are welcome and keep it up :)

YOu can dimension the image directly on the img tag.

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