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

API REST COUNTRIES REACT

@iTwiixZ

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


Le projet n'est pas terminé a 100%, je me suis concentré sur les fonctionnalités. J'ai d'ailleurs, lors de la selection sur All, la premiere fois les details sont pas visibles lors du clic.Il faut changer la région et la ça fonctionne. ( error 404 d'api mais l'api mentionnée n'est pas existante.

Je terminerais le design prochainement, c'était un plaisir d'apprendre sur ce projet pas si facile que ça.

Community feedback

Travolgi 🍕 31,420

@denielden

Posted

Hi Alexis, congratulations on completing the challenge, great job! 😁

Some little tips for optimizing your code:

  • add header tag and wrap the navbar for improve the Accessibility
  • add main tag and wrap the page content for improve the Accessibility
  • also you can use article tag instead of a simple div to the container card for improve the Accessibility
  • add descriptive text in the alt attribute of the images
  • 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
  • instead of using px use relative units of measurement like rem -> read here
  • to make it look as close to the design as possible add border-radius: .5rem and overflow: hidden to country class
  • use ul element for the details text of country instead of multiple p
  • 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
  • the details page have some problems

Hope this help! Happy coding 😉

1

@iTwiixZ

Posted

@denielden Merci pour le retour je prend note ! Pour le résultat où il n’y a pas d’erreur normal j’ai inclus cela mais ça ne semble pas fonctionner :(

1
Travolgi 🍕 31,420

@denielden

Posted

@iTwiixZ You are welcome! keep it up :)

0
Travolgi 🍕 31,420

@denielden

Posted

@iTwiixZ try to verify with console.log what is the type of result when the search haven't result ;) If is a void obj it isen't undefined and the condition must be changend to work

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