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
Log in with GitHub
OverviewSolutions25Comments6

All comments

  • Travolgi 🍕• 31,500

    @denielden

    Submitted

    Hi there :)

    I had a lot of fun in this challenge and had a good opportunity to learn how to use Router v6 and Styled Components for the first time.

    Also I practiced a lot with React custom hooks, initially I had some problems in the details page because React didn't update the page content because I rightly didn't set the listening on the parameter that changed.

    Also I added some additional features:

    • See current country weather data on detail page through other API
    • See the Map of the country on the details page
    • Button scroll to top after the scrool
    • Button for query reset when typing on the search input
    • Error page with animated svg when no results found
    • LocalStorage save of the set light or dark mode theme

    But...

    • Despite my extensive research I still have to figure out how I can create a preload at render time while react builds the page so that the "hops" due to reset.css are not seen as soon as the app is opened.
    • I also want to understand how to show an upload on the single image as it is uploaded.

    Thank you for taking the time to check out my project! And Happy coding ;)

    React REST Countries & Weather API with color theme switcher

    #fetch#react#react-router#styled-components#node

    7

    Isaac Novaes• 650

    @isaacnovaes

    Posted

    Hey @danielden!

    Great job! Your solution looks great. Also, the idea of displaying the country's weather and localization is awesome. However, I have a few suggestions:

    • If I go to any country detail and reload the page, your website crashes. I think that you should look into it
    • For a tablet dimension, for example, 811 x 860, all border country buttons are stacked in a column, leaving too much space which could be better used. So fixing it could improve the UI and the responsiveness
    • If a country has no currencies, nothing is displayed. I think that at least a "no currency" message should be displayed
    • If a country has no border, like Antarctica, a UI button with "no countries" text is displayed. I think that only a simple text fits best here instead of a UI button because, in this border countries section, a button links you to another country

    Marked as helpful

    2
  • Isaac Novaes• 650

    @isaacnovaes

    Posted

    Hi @MikevPeeren!

    First of all, thank you for analyzing my solution. About the slider shadow, I just did what the challenge design itself determines.

    Thank you for your considerations! 😁

    0
  • Isaac Novaes• 650

    @isaacnovaes

    Posted

    Hey man!

    Nice job! It looks nice and is responsive. However, I have two suggestions:

    • When you select a country that has many neighboring countries, like Brazil or Germany, their neighboring countries list overflows the screen horizontally for screen widths bigger than 900px. So check it out

    • You could implement a media query for tablets, because from a screen width of 600px to 1000px, the countries flag takes up the majority of the screen, and the countries data looks tiny. So implementing this media query would improve UX

    Marked as helpful

    0
  • Isaac Novaes• 650

    @isaacnovaes

    Posted

    Hello, pikamart!

    First of all, thank you for your feedback, I really appreciate it.

    Here are my comments on your suggestions:

    1. You are totally right because the font rendered was a sans-serif fallback, not the Poppins font. This mistake is already fixed in the new version of the site.

    2. For the mobile version, the text alignment should be center. However, for the desktop version, it should be left. I just forgot to make this conversion. Mistake fixed, too.

    3. Yep, I agree with you. Mistake fixed.

    4. According to the original challenge design, the form inputs should be right-aligned. So I think that my solution is appropriate.

    Once again, thank you for your feedback.

    I ask you to check the new version of my solution. If you find something else, please let me know.

    Happy coding! 😀

    0
  • John Rey Faciolan• 220

    @juani2

    Submitted

    My Last Newbie level solution for HTML/CSS only challenge.

    For the responsive effects on the header, I've implemented it via background positions and a dozen trial-and-error media queries. At first, I did try to implement the "splitting" image effect as the screen grows from a smaller viewport to a wider viewport but I messed up at flexbox.

    Question 1: How can I reduce my media queries in the implementation of my header section?

    Question 2: I do like the idea of responsive typography, Is the use of rem on my implementation of responsive typography better than the use of pixels? or does it really matter?

    Question 3: Overall, I feel like I have too many media queries. What can I do to refactor my media query code and improve the maintainability of my code?

    Your feedback will be of big help. Thank you. :)

    Responsive Design Using Vanilla CSS' clamp(), min(), and calc().

    2

    Isaac Novaes• 650

    @isaacnovaes

    Posted

    Hello Juan,

    On your first main section, an extra scrollbar shows up. I think that overflow:auto; on this section container would fix it.

    Apart from that, nice work!

    0
  • Isaac Novaes• 650

    @isaacnovaes

    Submitted

    Besides completing the challenge, I took the initiative to add not only a few animations, but also an external page, which is the destination to all available site links.

    I challenge you to find a mistake 😏 More than that! I challenge you to find a mistake and leave a comment 😎

    Kidding aside, I really appreciate every feedback. Thanks in advance! 😀

    Mobile first responsive site using HTML, CSS, animations, and SASS 😀

    2

    Isaac Novaes• 650

    @isaacnovaes

    Posted

    Hello, Juan!

    First of all, I appreciate your feedback. Thank you man.

    Second of all, I am afraid that I will increase the empty space among the testimonials, because the testimonial container will exceed the global frame of the site, i.e. this increase will break the global pattern margin of the site. In addition, I will increase the vertical space among the sections because I totally agree with you in this point.

    Well, thank you once again 😀

    0