Joanne Wang40โ|โPosted about 1 month ago
Try remove the margin of the cards and use gap property instead. gap will literally create gaps between flex items.
1
Design Comparison
SolutionDesign
Report
0Accessibility
issues1HTML
issues
Aaron Stroud's questions for the community
In this initial release, I deviated from the design in a couple of ways:
- I left out the DarkMode label. I think it looks better as a single icon.
I still need to fix the blinding darkmode flash. It's annoying on the initial load, but it becomes downright infuriating when you rapidly navigate between border countries (while in darkmode).
I'm planning to use this Josh Comeau post as a guide The Quest for the Perfect Dark Mode, but I'm going to need to overhaul my themes and darkmode to fix the flash. ๐ฅ
Addressed:
- I used flex box for the grid, so I couldn't get the cards to justify along the sides (
justify-content: space-between) with a gap. Should I refactor using css grid? (Safari now supports gap with flexbox as of last month)
Community Feedback
- tediko5,670โ|โPosted about 1 month ago
Hello, Aaron! ๐
Congratulations on finishing another challenge! You did great on this challenge. I won't lie, this sound effect on toggle scared the hell out of me. I think it is unnecessary in such a project to add such effects, but as we're learning is good to play with the code. Atleast make it a little bit quieter. ๐ Also, I added
justify-content: space-betweenon.bhdLnocontainer and it works good. It takes full width of container and place your flex items between like in design.- Add
:focuspseudo class to interactive elements like anchors, buttons etc. Useoutlineproperty to make your website more accessible to keyboard users. Focusable elements like anchor, buttons or inputs they have applied default:focuspseudo class withoutlineproperty. These default styles are subtle and hardly visible tho. Furthermore every browser has a slightly different default style for the outline, so you probably want to change the default style. Read more about why we should change focus styles.
Good luck with that, have fun coding! ๐ช
1 - Add
Hey Aaron, really well done!!๐ I went ahead and bookmarked it so I can study it more and learn from it. I really like the country card loaders that are displayed during the initial API call and the sound effect on toggle between light and dark mode is a really nice touch ๐
One suggestion I have is maybe have more of the country card loaders during the initial API call so that there aren't any big blank spaces on the screen without loaders if the user is viewing it on a wider desktop.
Also, it looks like you're doing quite a bit of prop drilling with the prop handleSearch (it's passed to FilterableCountryList, then FilterControls, then SearchBar before it's actually used) Could you declare that function in the SearchBar component so that it lives in the component that actually uses it? You could use Redux to manage the state and access
countryFilterin App.jsx and then dispatch the action to change the state from SearchBar.jsx. I realize learning Redux may seem daunting but it's worth it!Overall super awesome job and keep up the great work!! ๐ช
1
PGive some feedback to astroud about their solution...
Join our Slack community
Join over 50,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!