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 built w/ Angular 🅰️

Daniel 🛸 44,230

@danielmrz-dev

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


What are you most proud of, and what would you do differently next time?

🛸 Hello FEM Community! I'm Daniel and this is my solution for this challenge! 😊

🛠️ Built with:

  • Angular 🅰️
  • SASS 🎨
  • TypeScript 💙
  • BEM Notation 🅱️
  • Third Party API 🏴
  • Mobile first workflow approach 📲

That's my first advanced level project. I'm happy that I could finish, even though I wasn't able to get the filter to work 100% as it should. It's working, but it has some bugs I can't seem to fix right now. Despite that, it's working very well and I could practice a lot of Angular concepts while doing it.

Again, thanks to the Front-End Mentor team that creates challenges that make us learn a lot from doing them. 💟

If you have any suggestions on how I can improve this project, feel free to leave me a comment!

Feedback welcome 😊

Community feedback

@R3ygoski

Posted

Olá Daniel, parabéns pela solução, ela está muito bem-feita.

Notei algumas coisas no seu projeto que gostaria de pontuar. Vou começar pela parte de estilização.

Quando se pesquisa apenas um país, por exemplo "Antarctica" e muda para o "Dark mode", acaba ficando uma parte branca na parte inferior da tela, isso está acontecendo devido a sua <div> filha do <app-root> não ter o mínimo de tamanho para min-height: 100vh. Me refiro a esse elemento: Elemento - Linha 27

E uma outra coisa que notei é na parte lógica, se você tentar acessar a "Antarctica" você verá que não irá aparecer nada e resultará num erro no console. Acredito que isso está ocorrendo, pois, a Antártida não retorna alguns dados, então tem que ser feito um tratamento de dados para que não dê esse erro.

E quanto ao comentário acima, realmente o Search não está funcionando de maneira correta, parece que ele não é acionado quando removemos alguma letra, por exemplo, digite "brazil" e depois apague até que fique só "bra", o certo era aparecer Brazil e Gibraltar, mas está aparecendo somente o Brazil.

E é isso, parabéns seu projeto ficou muito bom.

Marked as helpful

1

Daniel 🛸 44,230

@danielmrz-dev

Posted

@R3ygoski Valeu pelo feedback, Bernardo.

Estou ciente desses bugs, tentei resolver antes de postar, mas não consegui. Ainda tô aprendendo como o Angular realiza determinadas ações e esse foi o melhor que consegui até o momento.

Vou refatorar esse projeto em breve e vou levar seu comentário em consideração. Obrigado!

1

@saularanguren

Posted

Hi Daniel, your project is really impressive, however, there are some details missing, such as the search engine.

1

Daniel 🛸 44,230

@danielmrz-dev

Posted

@saularanguren what do you mean by search engine?

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