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 with Vanila JS and theme switcher

Dusanβ€’ 700

@DEmanderbag

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


Hello everyone,

This is my most complete project so far and I'm generally happy with the code and the functionality.

For the layout, I've used CSS Grid and Flexbox with CSS Variables. While the data is still loading I'm using loading animation that was created in CSS and after the data is loaded I'm replacing it with the loaded data.

Border counties are also clickable which just repaint the data on the current page.

Let me know what you think about my solution and if you have any suggestions for improvements.

Community feedback

T
ApplePieGiraffeβ€’ 30,545

@ApplePieGiraffe

Posted

Greetings, once again, DuΕ‘an! πŸ‘‹

I think you've done a very nice job on this challenge! πŸ‘ Your solution looks good and responds well, and the themes and search and filter functionality works great! πŸ™Œ I really like the loading animation you added before the content loads on one of the country pages (it looks very clean). 🀩

I only suggest taking a look at your solution report and trying to clear up some of the errors that are there (since there seem to be quite a few, at the moment). πŸ˜‰

And as always, keep coding (and happy coding, too)! 😁

1

Dusanβ€’ 700

@DEmanderbag

Posted

Hi, @ApplePieGiraffe

I've noticed that there are a lot of errors especially in the HTML part of the report but I'm not sure why is that. Maybe I'm doing something bad but from what I've seen on the internet that is how you put lazy loading on the image.

The only possible solution is to remove the loading tag in general and after that generate the new report.

Thank you for your comment and happy coding.

1
T
ApplePieGiraffeβ€’ 30,545

@ApplePieGiraffe

Posted

@DEmanderbag

Hmm... yeah, that's interesting. I did read that that is a way to have the browser lazy load certain images by default, and since it's like a new feature in Chrome or something, some HTML validators don't recognize it yet. πŸ€·β€β™‚οΈ Anyway, have fun coding, too! πŸ‘

1
Dusanβ€’ 700

@DEmanderbag

Posted

@ApplePieGiraffe

Oh, I've just checked caniuse and for some reason, I thought lazy loading for images is much more supported. Anyway, I'm working on fixing those accessibility issues.

1
T
ApplePieGiraffeβ€’ 30,545

@ApplePieGiraffe

Posted

@DEmanderbag

πŸ‘

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