Skip to content
Submitted almost 2 years ago

REST Countries using React

Briuwu•750
@Briuwu
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

Hello~ ヾ(≧▽≦*)o

Another challenge complete!

This challenge is really fun to solve, because it's really challenging to me, and I learned quite a lot of techniques!

I added some lazy loading to it, but I'm not sure if I did it correctly, I also added a bit of animation. I used React Context to handle the API calls and different functions and also to avoid prop drilling.

Honestly, I'm not really sure if I did is a proper way to solve it. So, any feedback is highly appreciated!

Thanks for checking this one out! ╰(°▽°)╯

Community feedback

  • Abdulkader A Abdi•310
    @aaabdulakaderPosted over 1 year ago

    Hi Briuwu,

    Congratulations on completing the challenge and incorporating some extra features like lazy loading and animations! It's great to hear that you learned a lot from the process.

    In terms of feedback, one suggestion I have is to try implementing a feature where the regions dropdown disappears when the user clicks somewhere else on the site. This would provide a more seamless user experience and prevent the dropdown from cluttering the screen unnecessarily.

    You can achieve this by adding an event listener to the document that listens for any clicks outside of the regions dropdown. When a click is detected outside of the dropdown, you can then set the dropdown state to be hidden. You can also add a ref to the regions dropdown and use it to check whether the click occurred within the dropdown area or outside of it.

    Overall, great job on the challenge and keep up the good work!

    Marked as helpful
    1
    Briuwu•750
    @BriuwuPosted over 1 year ago

    @aaabdulakader Thanks for letting me know about that feature! I wasn't aware of it. I'll definitely look into it and try implementing it. Appreciate the feedback! (≧∇≦)ﾉ

    0
  • NicoR23•120
    @NicoR23Posted over 1 year ago

    woo, very good I like it, I hope one day I can do the same

    1
    Briuwu•750
    @BriuwuPosted over 1 year ago

    @NicoR23 Thanks! I'm sure you can as well, just keep on practicing!

    1
  • Jhovanny•120
    @jhovannyvivasPosted almost 2 years ago

    I like lazy loading

    1
    Briuwu•750
    @BriuwuPosted almost 2 years ago

    @jhovannyvivas Thanks!

    0
  • Account deleted

    This one really helped me, found my answer in your code. Thank you for posting this one.

    1
    Briuwu•750
    @BriuwuPosted almost 2 years ago

    @rohit-kep Nice! I'm glad to hear that! (≧∇≦)ﾉ

    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