Neste desafio, o objetivo é criar um aplicativo simples que exibe os personagens da Marvel. Para isso, você irá usar HTML, CSS e JavaScript para buscar as informações de personagens através de uma API e mostrar essas informações de uma forma bem organizada.
Nosso objetivo com esse desafio é entender como você estrutura o código, como resolve problemas e como organiza seu trabalho. Portanto, sinta-se à vontade e mostre o seu melhor!
Aqui estão algumas tarefas que você precisa completar para que seu projeto seja considerado pronto:
- Consumir uma API: Buscar dados da Marvel (como nome, descrição e imagem dos personagens).
- Mostrar as imagens e informações dos personagens de forma clara.
- Scroll infinito: O aplicativo deve carregar mais personagens automaticamente quando o usuário rolar para baixo.
- Design responsivo: Usar CSS para garantir que o aplicativo funcione bem em diferentes dispositivos (computadores, celulares, etc.).
- Organizar bem o código: Mantenha seu código limpo e fácil de entender para facilitar futuras mudanças.
A API que você vai usar para buscar as informações dos personagens é a Marvel API. Você vai precisar usar essa API para pegar dados como nome, descrição e imagem dos personagens. A documentação da API vai te ajudar a entender como fazer isso.
Depois de pegar os dados dos personagens, armazene-os de forma que, quando o usuário acessar o aplicativo novamente, a informação apareça rapidamente, sem precisar buscar tudo de novo. Você pode usar algo simples, como o localStorage
para isso.
Crie uma tela onde os personagens serão exibidos. Cada personagem deve mostrar informações como o nome, uma descrição curta e a imagem (usando a URL da imagem fornecida pela API). A tela precisa se ajustar bem tanto em celulares quanto em computadores.
Quando o usuário clicar em um personagem, ele deve ser levado para uma página onde ele verá mais informações sobre o personagem, como sua biografia completa e primeira aparição.
Quando terminar o projeto, siga estes passos:
- Crie um fork público deste repositório.
- Trabalhe no seu código e organize suas mudanças de acordo com o gitflow.
- Faça um pull request para o repositório original para que possamos ver o seu trabalho