Hello! 👋🏻
I know you've been active for a long time on here, but I just wanted to say that this is a challenge tackled by many users that should not yet be doing it and I'm not lying: You are the first person I see that keeps the aspect ratio of the flags so they're not cut off on the sites 😅
I also like the animations when you select another region from the dropdown (the cards gradually move to their "new" position). How does that work exactly with Framer Motion?
One or two small things I saw: "Where in the world?" is kind of an inappropriate h1 heading. It doesn't really describe the site.
Your text input is missing a label.
Your toggle button for the dark mode is not accessible. Best practice would be to use an aria-pressed state on it. Screen readers would then pronounce it like this: "Activate dark mode, toggle button, pressed" if it's active.
The icon does not change when the button is clicked.
On the detail page of the countries, you set the countrie's name as an h1, but you already have an h1 in the title.
Overall very nice solution 👌🏻
Marked as helpful
@MelvinAguilar
Posted
@Dudeldups
Thank you so much for such detailed feedback and for taking the time to review my solution.
About the animation, I used the <AnimatePresence> element to animate each card when they disappear. Then, I wrapped each card in a motion component (<motion.div>) and assigned it a "key" prop. Framer Motion handles detecting any changes in the list and animates the movement accordingly using the key prop. You can find a more detailed example in their documentation: https://www.framer.com/motion/animate-presence/#props
I appreciate your feedback once again.I've just pushed some updates to my repository to fix those issues. Thanks for helping me improve!
