Submitted over 1 year ago

Where in the world (SASS - JS - REST Countries API)

Hesam• 420

@hesam-fattahi

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

REST Countries API with color theme switcher

HTML
CSS
JS
API

4advanced

View challenge

Design comparison

SolutionDesign

Solution retrospective

Some things that are added or changed in this solution:

🎨 A little redesign (transparent header, cards redesign and a lot of border-radius)
👥 sort by population.
🖥️ skeleton screen while loading

This was the biggest challenge of Frontend mentor that I've worked on so far. The project is still in progress cause the js code I think needs a lot of refactoring.

So any feedback on how I can improve the code is greatly appreciated. 🖤

Thank you :)

Community feedback

Anastasiia• 120

@anastasiiaal

Posted over 1 year ago

Hello there! 👋 I love how you redesigned the initial project, especially your feature with a tiny flag near the border country, really well done!! 🔥 On the other hand, there seems to be some issue with the countries that do not have neighbours: check out Barbados, e.g. You should probably add some condition before your render. Otherwise, great job!

Marked as helpful

Hesam• 420

@hesam-fattahi

Posted over 1 year ago

@anastasiiaal

Hi! 👋 I hope you're doing fine.

At first I thought the countries that don't have borders, the borders array length is set to 0. But then I realized that there's no borders property in the object. I've updated the code and now they don't have the border countries item in details page.

Thank you for your comment! 🙏

Emmanuel Daniel• 1,170

@coderdannie

Posted over 1 year ago

Hi. Congrats on the completion of this project. An extra features you can add is to store the themes state using browser localstorage so that your site can maintain the theme state even if the page was reload. Right now if I switch to dark mode and reload the web page its switching back to the default theme. Using browser storage to store the theme and accessing the themes based on user preference will prevent this from happening. https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Marked as helpful

Hesam• 420

@hesam-fattahi

Posted over 1 year ago

@coderdannie

Hey man! 👋 I hope you're doing okay.

I've updated the code.

Thanks!! 🙏

Please log in to post a comment

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