Skip to content
OverviewSolutions
4
Comments
2
Matthias
@MatthiasSmith

All comments

  • Oleh Tovkaniuk•505
    @OlehTovkaniukSubmitted over 3 years ago

    It would be just awesome if you'd commented my code for fetching data and state management. And also tell me about any other mistakes if you see. I'm not really experienced in using React so really need feedback. This is not a big app so it is easy to look through its code 🙏

    React, Ipify, Leaflet.js

    1
    Matthias•235
    @MatthiasSmithPosted over 3 years ago

    Hey @OlehTovkaniuk, great job on this! Your solution works well, and your code is simple to follow and read too!

    Couple of things I noticed:

    • There seems to be too much padding inside of the "banner" element when viewing the solution on larger screen sizes.
    • Setting the "outline" property to "none" on the text and submit input elements makes it difficult to tell which element has focus when I use tab keys to navigate the page. Perhaps you could add them back for when people navigate using the keyboard using :focus-visible? Here's the MDN reference for it: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible

    I'd also like to offer you the same challenge you posed to me, which is to make your API token invisible to the client. 😉

    Let me know what you think.

    Best,

    Matthias

    1
  • Elizabeth•460
    @gelizabethSubmitted over 3 years ago

    Hi, community I've enjoyed a lot when was doing this challenge and I think I've completed it pretty well (any feedback is welcome). I've also added some active states styles. But there are some issues that I don't know how to fix:

    • Looks like it's difficult to load styles for the app. First it shows the app data and then loads widths, margins etc. I'm not sure how to explain it..
    • When I open the app from my mobile - countries flag images aren't the full width of it's container. The styles are: .country-card { max-width: 262px; } .country-card__flag { width: 100%; height: 161px; } .country-card__flag image { height: 100%; width: 100%; }.

    When I inspect it in chrome dev tools - uncheck and then check width of image it shows correctly. Thank you for checking my solution and happy coding to everyone :)

    React JS project w/Sass and Bootstrap

    3
    Matthias•235
    @MatthiasSmithPosted over 3 years ago

    Hi @gelizabeth.

    Looks great! Love the smooth transition between dark and light modes.

    Something I noticed while testing is that refreshing the browser when you're on a country's page causes a 404 error. Is it a router issue?

    And two small things: The title tag of the website is "React App." And the favicon isn't loading in my browser tabs.

    Awesome work!

    2