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

Caramello 180

@BuzzFizzer

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


console.log("Hello Programmers"),

Even though this project posed some challenges for me, I thoroughly enjoyed working on it, so much so that I took extra time to add additional features.

Technologies Used:

Extra Features:

  • Pagination: Added the ability to limit results per page, and a page navgation strip to allow easy movement between pages.
  • Sorting: Added the ability to sort countries based on name and population in an ascending or descending fashion.
  • Animation: Used a combination of AutoAnimate, transitions, and animations to create as smooth experience when traversing the page. This includes moving between result pages, changing website theme, when items are moved, shown or hidden, or when hovering over items.

Difficulties Encountered:

  • Route Transitions: I have used Vue's transition component to animate the route transitions a few times in the past, but unfortunately, it didn't work for me on this project for some reason. (I'll look into it further and update this project if I find anything)

If you have any suggestions on how I can improve my code, I would greatly appreciate it if you could leave a comment. Thank you in advance. (✿◠‿◠)

Community feedback

BrovoJD 190

@Jaheim-Douglas

Posted

As a beginner at HTML, CSS and javascript I marvel at your work and hope to get as good as you keep up the good work

1

Caramello 180

@BuzzFizzer

Posted

@Jaheim-Douglas

Thank you so much for the morale boost! Just remember to code a bit every day, even if it's just for an hour. Sooner than you think, you'll not only catch up to me but might even be better. Keep being awesome!

0
Gabr22 280

@MohamedGabr20233

Posted

your work is magnificent, do u have any advice for a beginner like me who only know html and css (not advance ) and learning JS

1

Caramello 180

@BuzzFizzer

Posted

@MohamedGabr20233

Thank you for your kind words. It makes me really happy when someone takes the time to leave me a positive comment.

Here's some valuable advice for a beginner that I personally wish I took more seriously when starting my journey:

  • Start with the Basics: Begin by getting a solid grasp on the fundamental concepts of JavaScript, such as variables, data types, and basic control structures like if statements and loops. These foundational concepts will serve as your building blocks for more advanced topics.

  • Hands-on Practice: Apply what you learn by working on small projects. Create interactive buttons, experiment with form validation scripts, or try your hand at simple animations. Practical experience is key to reinforcing your understanding.

  • Explore Online Resources: Take full advantage of the wealth of online resources available to you. From interactive coding platforms to instructive video tutorials and comprehensive documentation, there's something to cater to every learning style. I personally used freecodecamp's javascript course.

  • Learn by Doing: Remember, true comprehension comes from putting concepts into action. Write code, tinker with it, and don't be afraid to make mistakes. Mistakes are stepping stones to growth and learning.

  • Progress to Complexity: As you become more comfortable with the basics, gradually delve into more complex topics like functions, objects, and asynchronous programming (including promises and callbacks). These skills are crucial for creating dynamic and responsive web applications.

Above all, the most important advice is to persevere. Learning these skills takes time and effort. If you have any questions or need assistance, feel free to reach out to me on Discord. I'm here to help.

1

@mehmetakifakkus

Posted

Congratulations for completing this challenge!

I loved what you added as additional features, I especially will give AutoAnimate a chance in one of my future projects.

  • In my project I added storing the latest search value and filter value when you visit the country detail and go back to the main page. It uses URL search params. You may think adding this as a feature. link if you want to visit
1

Caramello 180

@BuzzFizzer

Posted

@mehmetakifakkus

Thank you for your kind words. Regarding AutoAnimate, I highly recommend considering it, as it brings substantial value to a website with minimal effort. Moreover, they offer excellent support for all major front-end frameworks.

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