Submitted 11 months ago
HTML 5 , CSS 3 , SASS , Bootstrap 5 , TypeScript , JavaScript
@MahmoudsMohammed
Design comparison
SolutionDesign
Community feedback
- @sperrowPosted 11 months ago
Nice responsive layout, dark mode is snappy. 👍
A few suggestions:
- Generally it's good to limit the number of duplicate api calls to reduce server load, and since you already fetch the entire list of countries on page load you could just save that list and filter it manually by region/search query.
- Anchor elements need an href value to be valid (https://accessibleweb.com/question-answer/link-element-still-accessible-without-href/). For your use case a button element would be more appropriate (though you'd have to remove some styles), or alternatively use
href="#"
. - The event listener for a single country can be set on
container
instead of the entire document. Also bc of event bubbling you can just look forbox
, you don't need all the parentElement else/ifs. - A nice feature would be to turn the border countries into buttons that take you to that country's page.
Marked as helpful0
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