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

All comments

  • lukassiarny• 280

    @lukassiarny

    Submitted

    Hi,

    I'm currently learning JS and wanted to practice fetch calls, so I decided to try this challenge. It would be better to do it with some kind of framework, since there should be a route for every single country, but I don't know any yet. So It's just a single page app with pure JS re-rendering the content again and again.

    I wanted to make countries lazy loading with Intersection Observer, but couldn't figure out how to fetch just certain amount of countries from API. So they show up all at once on one looong page.

    Any feedback will be appreciated. Thanks.

    Devdgehog• 80

    @devdgehog

    Posted

    Hello, I haven't tried this challenge yet but I checked the API. Indeed, it's imposible to fetch countries by pages.

    I recommend you to store your countries fetched by the all query in an array. By doing that you will be able to use that array instead of making queries for regions and search, using filter for example. The only queries left will be all and the detail ones.

    You can still benefit using Intersection Observer to load images only when the country is visible instead of loading all of them.

    I feel like you should at least bind your search function to the enter key on your search input (or onsubmit if you wrap it into a form). You can even bind the search function to onchange for a highly reactive search (if you do this you definitively need the stored array)

    You can format numbers using toLocaleString() or toLocaleString("en-US") if you want to force commas.

    Your listener to change z-indexes is useless you can directly set the z-index to 2 as you correctly handle the transition with opacity.

    Have a nice day. 🦔

    1