Skip to content
Submitted about 2 months ago

REST Countries API with color theme switcher (React)

react, sass/scss
P
Antoine•330
@super7ramp
A solution to the REST Countries API with color theme switcher challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

I think implementation works as expected and is close to the design.

What challenges did you encounter, and how did you overcome them?

It was fun to implement, I learned a lot of things!

🤔 There are a lot of flag images to load for the front page. How to lazy load them?

✅ Just add the loading="lazy" attribute!

🤔 How to implement a color theme switcher?

✅ Like this:

  1. Determine which theme to use initially
  2. Set it as a data attribute (e.g. data-theme)
  3. Implement a few CSS rules to change foreground and background colors based on this attribute value
  4. Toggle attribute value upon click on theme switcher button
  5. And voilà!

🤔 How to customize the region picker without JavaScript?

✅ Learn about customizable select elements!

What specific areas of your project would you like help with?

Any advice/feedback welcome!

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Jan Kotvaš•460
    @DrakeHermit

    Good job on finishing the project. One thing I noticed immediately after I went to look through your code is the fact that you committed the figma file which is not something you should do. Also you committed the .env file too which should never be committed since it holds your secrets, even if it's not that bad since you only had the url to the API there it's still not the best idea to commit your actual .env file After looking through your actual src folder I noticed that you include a lot of logic in your components while that's not bad by any means it's usually better if you extract the logic into separate functions and then import them into your main component. Also you honestly really don't need to comment your code that much. I also noticed some inconsistencies with the actual design file but that's not that big of a deal honestly.

    Overall you did a great job Happy coding!

    Marked as helpful

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