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

REST Countries API with color theme switcher - Vanilla JavaScript

@blade-01

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

Solution retrospective


Yay!!!🤾

I'm so happy to be back, It's been a while I last completed a challenge, I believe there are easier ways to solving this challenge, I would be very much happy to receive feedbacks.

Arigatou 🤝

Community feedback

@PraneetDixit

Posted

Hi @Tobesh01 !

Good Job on the challenge !

Some points for improvement -

  • There is no way to know which region have you selected once you click and select any region. It would be great if the name of the selected region is indicated in the place of "Filter by Region".
  • I noticed that you are sending a separate request every time user is changing the filters. A better approach can be retrieving all the data only once on the initial page load, store it in a variable and do all the filtering operations on the stored data.
  • The name filter and the region filter are not coordinating. When I type "ind" (without quotes) in the filter box and select the region Asia, I expect the app to show me all the countries in Asia whose name contain "ind". But both filters are overriding each other.
  • Since there are many countries and each country card has an image, loading all those images can leave a bad effect on the UX. You can set loading="lazy" on the images so that the off-screen images are not loaded until the user scrolls to them. You can read about lazy-loading here.

Happy coding!

Marked as helpful

0

@blade-01

Posted

@PraneetDixit Thanks for the feedback.

Your points are very well noted

0
T
Chamu 13,110

@ChamuMutezva

Posted

Well done.

  • When I make a continent selection, there is no option to return to all countries
  • I would prefer the bordering countries to be full names - the short code might not be helpful to users

Happy coding

Marked as helpful

0

@blade-01

Posted

@ChamuMutezva It's actually a feature, so as to continue where you left off, you can view all countries by erasing the previously typed country or a page refresh 😁.

As for the border countries, I'd work on that.

Thanks for the feedback 😊

0
T
Chamu 13,110

@ChamuMutezva

Posted

@Tobesh01, cool. Didn't take note of that.

0
P
Patrick 14,285

@palgramming

Posted

⭐⭐⭐⭐⭐ Wonderful Job

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