Integração com a API REST Countries para pegar dados de países e exibir em uma página, o objetivo é colocar em prática conhecimentos já aprendidos e também me desafiar com novas funcionalidades. O projeto foi construído com HTML, CSS e JS. Pude colocar em prática meus conhecimentos em responvidade, flexbox, grid layout, classes, manipulação de elementos, LocalStorage, função IIFE, função assíncronas método map, forEach e etc. A ideia do projeto eu peguei no site Frontendmentor
-
Ver todos os países da API na página principal
- Mostrar todos os países na página principal
- Cada país deve conter: bandeira; nome; qtd população; região; capital;
- Criar interface para mostrar todos os países.
- Mostrar todos os países na página principal
-
Procurar por um país atráves de um input
- Capturar nome do país digitado
- Comparar com o nome que foi pegado na API
- Fazer comparação a cada letra digitada
- Mostrar o país encontrado, esconder os outros que não são iguais ao digitado
- O resultado da pesquisa tem que ir mudando conforme o usuário vai digitando ou apagando o que for digitado
-
Filtro por região
- Criar select com as opções
- Capturar filtro selecionado
- Comparar o filtro selecionado com todos os países
- Mostrar na interface apenas os países da região selecionada
- Corrigir bug: Ao voltar para o default option não estava renderizando nenhum páis
- Corrigir bug: Uncaught TypeError: Cannot read properties of undefined (reading 'style') que foi gerado ao resolver a etapa anterior
-
Clicar em um país para obter informações mais detalhadas
- Criar página básica que vai mostrar o país de forma detalhada
- Criar botão "voltar para página principal
- Deixar a div do país 'clicável'
- Capturar elemento (div countrie-container) que foi clicado
- Abrir a página criada ao clicar
- Salvar nome do país clicado no localstorage (ainda não sei um jeito melhor de pegar essa váriavel por outra página)
- Capturar nome do pais clicado pelo localstorage na outra página que ira fazer outra chamada na API
- Fazer chamada na API apenas para o país capturado no localstorage
- Corrigido bug na chamada à API (estava buscando também os que tinham nome parecido)
- Capturar os seguintes dados do país selecionado: Native Name; Population; Region; Sub Region; Capital;
- Capturar os dados: Top Level Domain; Currencies; Languages.
- Renderizar página com os detalhes do pais
- Capturar os dados de Borders
- Abaixo dos detalhes mostrar as Border Countries
- Pegar o país pela url e retirar a função que fazia pelo localstorage
- Clicar nos países da página de detalhes deve direcionar para o mesmo
-
Refatorar o design para ficar o mais próximo possível ao design que foi proposto
- Finalizado layout Mobile
- Criar e estilizar o header
- Melhorar design do input
- Melhorar design do select
- Melhorar design dos cards dos países
- Melhorar desing do botão back (pág country.html)
- Melhorar design da pág country.html
- Adicionar box-shadow no header das duas páginas
- Desktop
- Ajustar layout página principal
- Ajustar layout página do país detalhada
- Finalizado layout Mobile
-
Alternar tema entre dark e light mode
-
Quando filtro de região estiver selecionado, a barra de pesquisa deve funcionar de acordo com o filtro, pesquisando somente países daquele filtro específico