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

Cezar Ganzonβ€’ 280

@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

Report

0

Accessibility Issues

0

HTML Issues

View Report

Cezar Ganzon’s questions for the community

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

Deniel Denβ€’ 21,600

@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


Cezar Ganzonβ€’ 280

@cganzon

Posted

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

1

Please focus on giving high-quality, helpful feedback and answering any questions cganzon might have. Here are some key points to consider:

  • Does the solution include semantic HTML?
  • Is it accessible, and what improvements could be made?
  • Does the layout look good on a range of screen sizes?
  • Is the code well-structured, readable, and reusable?

You can read our community guidelines if you're unsure what to post.

Slack logo

Join our Slack community

Join over 100,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!