Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Oops! You must first complete or unlock this challenge
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

React JS

siuglukas 190

@siuglukas

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

Report

253

Accessibility Issues

333

HTML Issues

View Report

siuglukas’s questions for the community

Feedback would be good.

Community Feedback

@steventoben

Posted

I haven't looked through the React code yet, but just a quick tiny thing I'd do is add padding-bottom: 1rem, padding-left: 1rem to the .control_button-as-heading class. The dropdowns look a bit weird on my browser with the arrow ending up under the text, whenever I added those two lines of CSS (overriding the padding already set) to that class they line up with your textbox and look much better (at least on my screen). Just thought I'd share that in case it's not just my browser that the dropdowns look a bit funny on.

The functionality looks great and works exactly as I'd expect so good job on the main program! I like the loading screen (i assume) Suspense component use. I haven't looked through the source but it functions great and looks nice so good job!

3


siuglukas 190

@siuglukas

Posted

@steventoben Thank you a lot!

1

@DarwinLozada

Posted

Very Nice solution! This is very well done, you do have an eye for details. I liked that sort by feature that you implemented and the 404 page (always do a little bit more like a lifestyle). All the functionality is perfect.

I liked your code, it was very well commented and distribuited.

The things that I can say are that when you open the "sort by" and "filter by" and I click outside of them, they does not close, is a bit strange to click outside and keep having them activated.

Great job!

1


siuglukas 190

@siuglukas

Posted

@DarwinLozada Thank you so much for taking a look, l will fix that.

0

Please focus on giving high-quality, helpful feedback and answering any questions siuglukas might have. Here are some key points to consider:

  • Does the solution include semantic HTML?
  • Is it accessible, and what improvements could be made?
  • Does the layout look good on a range of screen sizes?
  • Is the code well-structured, readable, and reusable?

You can read our community guidelines if you're unsure what to post.

Slack logo

Join our Slack community

Join over 100,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!