Skip to content
Submitted over 1 year ago

Responsive countries data using ReactJS

Veerpal Kaur•185
@Vee339
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

I completed this project easily but there were a few problems that I faced:

  1. How to use shadows correctly?
  2. How to make cards responsive, having the correct width and height and not leaving any space on sides( I used Flexbox but still couldn't make it perfect)?
  3. If I selected one region from the filters. Then, how to remove this filter without refreshing the page?

Community feedback

  • Emmanuel Daniel•1,170
    @coderdanniePosted over 1 year ago

    Hi. Congrats on the completion of this project. An extra features you can add is to store the themes state using browser localstorage so that your site can maintain the theme state even if the page was reload. Right now if I switch to light mode and reload the web page its switching back to the default theme. Using browser storage to store the theme and accessing the themes based on user preference will prevent this from happening. https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

    1
    Veerpal Kaur•185
    @Vee339Posted over 1 year ago

    @coderdannie It's a great idea. Will try it out.

    0

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