Skip to content
Submitted 5 months ago

REST Countries API with color theme switcher

Nikhil Kumar Singh•40
@mrnikhilsingh
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...REST Countries API with color theme switcher
  • HTML
  • CSS
  • JS
  • API
4advanced

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

What I'm most proud of:

  • Well-structured HTML code with semantic elements and descriptive class names.
  • Use ARIA-compatible icons from Remixicon and Google Fonts for a professional design.

What I would do differently next time:

  • Add accessibility attributes, such as alt and aria-label, to ensure usability for everyone.
  • Simplify CSS classes and consider using a preprocessor like Sass or Less.
  • Add more semantic meaning to the HTML structure, such as wrapping sections in elements.
  • Enhance user experience with JavaScript functionality, such as event listeners for the dark mode toggle and back button.
What challenges did you encounter, and how did you overcome them?
  • Structuring the HTML Code
  • Accessibility
  • Consistency in Design

Community feedback

  • Nikesh W•170
    @randomduckduckPosted 5 months ago

    Nice solution. Love that you used transition effect when switching between Light and Dark modes. And vanilla js solutions are always nice to have.

    Being a vanilla js solution means reloading the page when user clicks any plpCard or borderCountries (can be resolved by manipulating history stack of browser). Still you saved userPreference so that same color is preserved across page loads is really nice to have.

    Few observations:

    1. Flag image sizes are not in a single row. Adding align-self : baseline and cropping image height will solve the issue.
    2. Text search and filter both don't work together. For ex, searching 'das' gives empty results, but then using different filter loads that region list. Can be fixed by either fixing logic (to take both searchTerm and filterTerm when showing list) or clearing search bar when clicking a filter (hacky but quick fix).

    Nice solution though!

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

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