Design comparison
Community feedback
- @denieldenPosted about 2 years ago
Hi Edis, congratulations on completing the challenge, great job! 😁
Some little tips for optimizing your code:
- you can use
article
tag instead of aul > li
to the container card for improve the Accessibility... but this is correct too - 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 image - instead of using
px
use relative units of measurement likerem
-> read here - add
transition
on the body to smooth the change theme color - use
ul
element for the details text of country instead of multiplep
- 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 - 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"
Hope this help! Happy coding 😉
Marked as helpful1@edo979Posted about 2 years ago@denielden Thank you for reading my code, I agree with everything you said. I really missed those countries in the p tag, I must have been in a hurry.
I also think like you about that filter "all region", but I followed the specs, that's why I didn't make a button to reset the filter.
I always use div elements around images without exception, they could fall off the page, they are so fragile. Descriptive text in the alt of img tag I completely forgot, I don't know what happened to me.
There is one more huge mistakes, can you find it? A logical error, not a semantic one.
I'm so glad you read my code, thank you very much and happy coding.
1@denieldenPosted about 2 years ago@edo979 You are welcome!
What huge logical mistake are you talking about?
Another thing to recover the data creates a custom hook external to the component so that it can be recalled and reused in different points without rewriting the function. [read here] (https://en.reactjs.org/docs/hooks-custom.html)
Keep it up :)
0 - you can use
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