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

Community feedback

• 

  Matthew Sperry•190

  @sperrowPosted 10 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 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