This is a solution to the REST Countries API with color theme switcher challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- See all countries from the API on the homepage
- Search for a country using an
inputfield - Filter countries by region
- Click on a country to see more detailed information on a separate page
- Click through to the border countries on the detail page
- Toggle the color scheme between light and dark mode (optional)
- Solution URL: GitHub Page
- Live Site URL: Rest Countries
- Semantic HTML5 markup
- Tailwind CSS
- Flexbox
- SpinKit Library - Loading animations
- Mobile-first workflow
- Vanilla Javascript
Practiced using the MVC architecture I learnt sometime back, really helped with my understanding of breaking codes down into smaller structures which can simply help in debugging. Also used Parcel as a bundler to manage the modules. I also put into practice error handling and how to display it especially during a 404 error.
Moving forward, I'd love to build more projects to understand the architecture better and even use a framework like React to help with faster builds.
- Stack Overflow - The developer communit here helps to answer questions when you feel stuck.
- SpinKit Library - An amazing resource for a whole lot of loading animations which us very easy to use.
- Undraw - A lot of illustrations are available here for your designs.
- Nerdcave - A tailwind css cheatsheet that has all available tailwind css property and it's very easy to navigate.
- Website - Saleem's GitHub
- Frontend Mentor - @TheSaleem
- Twitter - @TheSaleem_
Thankful for all the online tutors that have brought me this far.