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

Responsive Country Finder with Vanilla Javascript and REST Country API

@nuel1

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

Community feedback

Carl Wicker 1,055

@carlwicker

Posted

Hey ya, just been checking out your solution. There are a few issues, the most important is the speed. There seems to be bottleneck somewhere, as the data is very slow to return.

It might be worth getting the all API data once and storing it (since it doesn't change) to reduce APIs calls. Maybe that slowing it down, but haven't looked into your code.

Also...

  • search functionality is not working from the input field.
  • consider adding a option to clear the filter on the dropdown, i know its not in the design but it makes sense to be able to clear the filter, I believe this was overlooked by the designer.
  • finally, fix those accessibility and HTML issues in the report.

Layout is looking good, I like your tweaks to the original design.

Keep up the great work.

Marked as helpful

1

@nuel1

Posted

@carlwicker Hi! Thanks for the feedback ❤

You pointed out the slow rate at which the content loads which is obvious. And that was simply because i added a preloader animation that takes ten seconds to complete. The content fetched from the third party api(REST County API) was made when the document is first loaded by the browser. And i stored the data fetched in browser's local storage just in case the user reloads the page offline.

Therefore, whenever a user makes any action, the animation triggers... and then ends after ten seconds... but I could remove it if you think that is a bad user experience. Do you think it's a good idea to make does animation delay for every action a user makes?

The search functionality from the input was delibrately not included... instead, i attached it to the search icon...

Yeah, the acccessibilty issues in the report. I noticed the awkward behaviour when trying to scroll down... it bubbles... and i think it could be from the effect of the Intersection Observer api i used to load content as user scroll down the page...

Thanks again for your feedback... Was very helpful...

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