Lore of Legends é um projeto que explora o vasto universo de League of Legends, oferecendo uma imersão completa nas histórias dos campeões e nas regiões que formam Runeterra. Este projeto foi desenvolvido durante a Imersão DEV da Alura em parceria com o Google Gemini, utilizando HTML, CSS e JavaScript.
(Página inicial)
O projeto Lore of Legends foi desenvolvido em várias etapas. Primeiro, fiz uma lista de campeões, selecionando dois de cada região de League of Legends que eu pretendia incluir no projeto. Em seguida, criei a página inicial e adicionei uma barra de pesquisa, conforme aprendido nas aulas. Durante as aulas, aprendemos a colocar a tag âncora <a> para redirecionar diretamente a outra página com mais informações, mas eu decidi me desafiar e criar todas essas páginas dentro da própria aplicação. Desenvolvi a primeira página de campeão, focando bastante no CSS para garantir um visual atraente e funcional. Com essa página pronta, utilizei sua estrutura como base para construir as outras páginas, mantendo o mesmo layout e estilo, variando apenas o conteúdo de cada uma, o que facilitou bastante a criação de várias páginas. Após isso, conectei todas as páginas utilizando a tag âncora <a>, garantindo uma navegação fluida. Por fim, organizei a base de dados de cada campeão em um arquivo .js e criei a função de pesquisa em um arquivo separado. Essa função pesquisa na base de dados os campeões que correspondem ao nome ou letra inserida. Se nenhum campeão for encontrado, uma mensagem de erro será exibida abaixo. Caso a caixa de pesquisa esteja em branco, outra mensagem de erro será exibida.
- 29 páginas dedicadas a campeões, cada uma apresentando detalhes sobre a história e origem do personagem.
- 14 páginas com informações e descrições sobre as diferentes regiões do universo de LoL, como Demacia, Noxus, Ionia, entre outras.
(Página com todos os campeões disponiveis no projeto, ela utiliza a mesma estrutura e estilo dos resultados de pesquisa da página inicial)
- HTML5: Estruturação das páginas.
- CSS3: Estilização visual e responsividade.
- JavaScript: Implementação da interatividade e gerenciamento da base de dados dos campeões.
Apesar de parecer algo complexo, todas as páginas dos campeões e regiões seguem a mesma estrutura e compartilham o mesmo CSS. Essa uniformidade tornou o projeto muito mais simples de desenvolver, facilitando a manutenção e expansão.
- Pesquisa por campeões: permite que os usuários encontrem rapidamente as histórias de seus campeões favoritos.
- Seções interativas: ao clicar em cada campeão ou região, você pode explorar mais detalhes e descrições exclusivas.
- Navegação intuitiva entre as páginas de campeões e regiões.
O projeto contém:
- Página Inicial: Apresenta uma barra de pesquisa que permite aos usuários buscar campeões específicos por nome.
- Páginas de Campeões: Cada uma apresenta o nome, descrição, e uma breve biografia dos personagens jogáveis.
- Páginas de Regiões: Detalhes sobre as regiões de Runeterra, suas histórias e como se conectam ao universo de LoL.
- Acesse o projeto: https://lore-of-legends.vercel.app/
- Na página inicial, você pode usar a barra de pesquisa para buscar campeões específicos.
- Explore as páginas dedicadas a cada um dos campeões e regiões para aprender mais sobre suas histórias.
Este projeto foi desenvolvido apenas para fins educacionais e não é afiliado à Riot Games.