Uma galeria interativa e responsiva de filmes e séries de terror, construída com tecnologias web modernas.
Projeto do curso Imersão Dev da Alura com apoio do Google Gemini
HorrorMovie é um site que exibe uma coleção de filmes de terror, carregados dinamicamente a partir de um arquivo data.json. O projeto foi desenvolvido com foco em JavaScript puro (Vanilla JS) para demonstrar manipulação avançada do DOM, assincronicidade e criação de interfaces de usuário ricas e interativas, sem o uso de frameworks.
- 👻 Galeria Dinâmica: Renderiza cards de filmes de forma assíncrona a partir de dados locais.
- 🔍 Busca Inteligente: Filtra filmes em tempo real por nome, sinopse, ano ou tags.
- 📊 Ordenação Flexível: Organiza a galeria por data de lançamento (ascendente/descendente) ou ordem alfabética.
- 🎨 Design Temático: Interface escura e imersiva, com fontes e cores que evocam o clima do terror.
- 📱 Layout Responsivo: Experiência de usuário otimizada para desktops, tablets e smartphones.
- 🔗 Links Externos: Cada filme possui um link direto para sua página no IMDb para mais informações.
O projeto foi construído utilizando as seguintes tecnologias:
!HTML5 !CSS3 !JavaScript
- HTML5: Estrutura semântica e acessível.
- CSS3: Estilização moderna com Flexbox, Grid Layout e Media Queries.
- JavaScript (ES6+): Lógica da aplicação, manipulação do DOM e requisições usando Fetch.
- JSON: Formato para armazenamento e consumo dos dados dos filmes.
Por ser um projeto front-end estático, você pode executá-lo facilmente em seu ambiente local.
-
Clone o repositório:
git clone https://github.com/marcosA-sousa/imersao-dev-alura.git
-
Navegue até o diretório do projeto:
cd imersao-dev-alura -
Abra o arquivo
index.htmlno seu navegador.Para uma melhor experiência, especialmente para evitar problemas com a política de mesma origem (CORS) ao usar a Fetch API localmente, é recomendado usar um servidor web. Se você tem o VS Code, a extensão Live Server é uma ótima opção.
Desenvolvido por Marcos Sousa