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 App

P

@cganzon

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


This is the first advanced challenge I've completed. There were many hurdles along the way, but overall I'm happy with how this project turned out.

I decided to use EJS because I recently completed Colt Steele's web development boot camp and EJS was the main templating engine that was taught. The other technologies I used in this project were express, axios, and local storage.

If you take a look at the repository, you would see that the CSS file is quite long. I decided not to use a library/framework for fear of not replicating the design well. However, I may remake this project in the future with a javascript framework and a CSS library/framework in the future, but for now this is my solution given the technologies I am comfortable working with.

I wasn't sure how to go about styling the options of the region filter. I did some research online and found that it would be difficult to style the options to look good because of cross-browser differences, so I decided to just leave them alone.

Some challenges I had while building this project were: -getting the selected page theme to persist as the user navigates the pages or refreshes a page (that was what local storage was used for) -rendering the actual names of the border countries on the details page as opposed to their 3 letter codes -organization of files and code

I did the best I could given the one week timeline I placed on myself. If you have any ideas or tips on how I could improve my code, don't hesitate to let me know. Thanks!

Community feedback

Travolgi 🍕 31,480

@denielden

Posted

Hey Cezar, congratulations on completing the challenge! You did a great job 😉

Let me give you some little tips for optimizing your code:

  • instead of using px use relative units of measurement like rem -> read here
  • use ul element for the details text of country instead of multiple p
  • I would also add a query reset button, I find it very convenient
  • in the filters there is no way to return to all countries after choosing a region, add an entry "all region"

Hope this help! Happy coding 😁

1

P

@cganzon

Posted

@denielden Thanks for the feedback Deniel! I’ll try to get those suggestions implemented as soon as I can.

1

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