Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

REST Countries API | Styled Components, React Router & Localstorage

MasterKrabβ€’ 940

@MasterKrab

Desktop design screenshot for the REST Countries API with color theme switcher coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
4advanced
View challenge

Design comparison


SolutionDesign

Solution retrospective


This is my first practice with React and I would appreciate any feedback.

I have added a 404 error page and a spinner.

Community feedback

P
ApplePieGiraffeβ€’ 30,545

@ApplePieGiraffe

Posted

Hello there, MasterKrab! πŸ‘‹

Great job on this challenge! πŸ‘ I really like the loading animation that you added and I noticed you styled the scroll bar! πŸ‘ Overall, your solution looks pretty good! πŸ‘ It's nice to see you try out a React, too! πŸ˜€

There's a lot of space between the country cards when the layout changes from a four to three column grid. I suggest putting a fixed amount of space between the cards and centering them in their container so that they don't look so distanced from each other. πŸ™‚

Also, the filter option doesn't seem to be working so well for me. Currently, selecting a filter and searching for a country still shows a few countries in other regions unless I make my search quite specific (e.g., selecting "Africa" then typing "u" into the search bar shows Portugal). You might want to take another look at that! πŸ˜‰

As alwaysβ€”keep coding (and happy coding, too)! 😁

1

MasterKrabβ€’ 940

@MasterKrab

Posted

@ApplePieGiraffe Very true what you say, I already fixed it.

Thank you very much for the feedback you always give me.

0
P
tedikoβ€’ 6,580

@tediko

Posted

Hello, MasterKrab! πŸ‘‹

Good effort on this challenge! Your solution responds well and looks good. I like that load animation. Kudos for taking time and adding ":focus" pseudo-class for accessibility. I don't know React so I don't help with that but small tip from me is to add listener for your input and look for 'input' event so it will be filtering countries everytime user type a letter.

Good luck with that, have fun coding! πŸ’ͺ

1

MasterKrabβ€’ 940

@MasterKrab

Posted

@tediko Thank you so much!

0
Aastha Anandβ€’ 345

@aasthaanand123

Posted

Hey! Great job. I wanted to ask if the same thing can be achieved using just html,css and Javascript?

1

MasterKrabβ€’ 940

@MasterKrab

Posted

@aasthaanand123 Thanks and of course it can be achieved with just html, css and js.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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