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

HTML 5 , CSS 3 , SASS , Bootstrap 5 , TypeScript , JavaScript

@MahmoudsMohammed

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

Community feedback

@sperrow

Posted

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 for box, 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 helpful

0

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