Skip to content

LipePLima/Api-Rest-Countries-com-darkmode

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

34 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Países do Mundo

Descrição

Aqui você pode encontrar todos os países do mundo e saber um pouco mais sobre eles. E para facilitar sua pesquisa, pode pesquisar pelo nome do país, e se tiver um continente de preferencia, também temos um filtro em formato de lista com todos os continêntes!! Além do querido darkmode, caso você curta uma tela escura.

Para todas as informações dos países, foi utilizada a API Rest Countries na aplicação. Infelizmente a página não está muito otimizada e peço desculpas por isso e também um pouco de paciência para o projeto carregar hahaha Pretendo modificar em breve para uma melhor experiência.

Etapas

1° dia - Inicio do Projeto:

  • Criar layout destktop;
  • Estilizar tema darkmode;
  • Conseguir exibir a lista de continentes ao clicar no botão de filtragem;

2° dia - Criando funcionalidades(DARKMODE):

  • Criar funcionalidade com Javscript para o botão darkmode;
  • Conseguir alternar o tema do site entre light e dark;

3° dia - Manipulando API:

  • Manipular a API Rest Countries;
  • Estilizar div dos país;
  • Exibir país dentro de uma div com: Bandeira, nome, população, continente, capital;
  • Adicionar divs conformes a quantidade de países no mundo;
  • Darkmode funcionando em cada botão de país;

4° dia - Filtrando países:

  • Filtro de pesquisa de países funcional;
  • Filtro de pesquisa de continentes funcional;
  • Responsividade da página principal;
  • Fazer a página de Mais Informações;
  • Darkmode da página de Mais Informações;

5° dia - Segunda Página de mais informações;

  • Alterar página de acordo com o país clicado;

6° dia - Segunda Página de mais informações;

  • Exibir informações do país selecionado;
  • Responsividade da página de mais informações;
  • Fazer README detalhado;

Extra:

  • Exibir mensagem de erro caso a escrita no filtro input seja errada e não exiba nenhum país;
  • Carregar Conteúdo sob demanda para otimizar a página;

Tecnologias

HTML5 CSS3 JavaScript

Hospedagem:

Vercel

Imagens

📷 Página inicial

Página principal

📷 Página Mais Informações

Página Mais Detalhes Light Mode

📷 Página Mais Informações com Darkmode

Página Mais Detalhes Dark Mode

Depoimento

Foram 9 longos dias para a "conclusão" deste projeto. Um projeto bem desafiador que quebrou a minha confiança nesses últimos 2 dias, mas ela foi restaurada após vencer as barreiras que enfrentei. Uma das minhas grandes dificuldades foi transportar as informações do país selecionado de uma página para outra. Hoje(11/12/22) que consegui solucionar esse problema transportando as informações do país selecionado para a localStorage e pegando-as na segunda página, assim pude colocar o máximo de informações possíveis para um fácil manuseio e também um id para retirar o restante das informações da api sem maiores dificuldades.

Infelizmente não consegui implementar todas as funcionalidades que pretendia, porém não abandorarei o projeto, pois ainda tem muitos desafios pela frente para deixar ele do jeitinho que eu quero. Não consegui traduzir todas as informações que retirei da API(Aceito sugestões para traduzir todo o projeto). Independente de não conseguir concluir todos os objetivos, tive a oportunidade de aprender bastante com este projeto e quebrar barreiras que julguei ser derrotado por elas, não desisti e o resultado veio: Venci. Evolui muito ao longo desses 9 dias e sinto que a partir de hoje sou capaz de enfrentar desafios maiores.

Espero que tenham gostado do projeto, foi um experiência sensacional(todos os projetos eu sinto isso, pois sempre aprendo MUITO com cada um deles)!

Contato | Redes Sociais

Gmail Whatsapp Linkedin

Desenvolvedores


Felipe Pereira de Lima

About

Aqui você pode encontrar todos os países do mundo e saber um pouco mais sobre eles.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published