Recomendador de Filmes

Descubra o próximo filme que você vai amar.

Título do Filme

Aqui ficará o resumo do filme.

Trechos do Filme

body { font-family: Arial, sans-serif; background-color: #f4f4f4; color: #333; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; } header { background-color: #333; color: #fff; padding: 20px; width: 100%; text-align: center; } main { padding: 20px; max-width: 800px; width: 100%; } .filme-card { background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); text-align: center; } .filme-card img { max-width: 100%; height: auto; border-radius: 8px; margin-bottom: 20px; } h2 { color: #0056b3; } #recomendar-btn { background-color: #007bff; color: #fff; border: none; padding: 10px 20px; font-size: 16px; cursor: pointer; border-radius: 5px; margin-top: 20px; transition: background-color 0.3s; } #recomendar-btn:hover { background-color: #0056b3; } footer { text-align: center; padding: 10px; background-color: #333; color: #fff; width: 100%; margin-top: 20px; } const filmes = [ { titulo: "Interstellar", imagem: "https://image.tmdb.org/t/p/w500/gWvV2lWw8S3l9s0d4dE3E3fJ3d2.jpg", resumo: "Um grupo de exploradores faz uso de um buraco de minhoca recém-descoberto para superar as limitações das viagens espaciais humanas e conquistar as vastas distâncias de uma viagem interestelar.", trechos: [ "Não entre gentilmente naquela boa noite. A velhice deve queimar e delirar com o fim do dia; Raiva, raiva contra a morte da luz.", "Nós costumávamos olhar para o céu e nos perguntar sobre nosso lugar entre as estrelas. Agora, apenas olhamos para baixo e nos preocupamos com nosso lugar na poeira.", "A humanidade nasceu na Terra. Ela nunca foi destinada a morrer aqui." ] }, { titulo: "A Chegada", imagem: "https://image.tmdb.org/t/p/w500/wzL4YnJtQeJ43J1B0oQd6gH1K8J.jpg", resumo: "Quando naves alienígenas chegam ao planeta, uma linguista especialista é recrutada pelo governo para decifrar a linguagem alienígena e descobrir por que eles vieram à Terra.", trechos: [ "A linguagem é a base da civilização. É o cimento que une as pessoas.", "Eu sempre fui grata por ver a beleza e o horror na mesma frase.", "Houve momentos em que eu sentia que estava presa na mesma repetição, mas percebi que cada momento é uma nova oportunidade." ] }, { titulo: "O Poço", imagem: "https://image.tmdb.org/t/p/w500/sH5WnJz95qFh3rV6xQxT2eG4tC3.jpg", resumo: "Em um futuro distópico, prisioneiros são mantidos em celas verticais, com uma plataforma de comida que desce um nível por dia. Aqueles no topo comem bem, enquanto os de baixo morrem de fome. A revolução está a caminho.", trechos: [ "Primeiro, você precisa comer. Depois, você precisa viver. Depois, você precisa de um plano.", "Existem três tipos de pessoas: aquelas que estão acima, aquelas que estão abaixo e aquelas que caem.", "Um prato cheio de comida não é o mesmo que um prato de comida." ] } ]; const imagemFilme = document.getElementById('imagem-filme'); const tituloFilme = document.getElementById('titulo-filme'); const resumoFilme = document.getElementById('resumo-filme'); const trechosFilme = document.getElementById('trechos-filme'); const recomendarBtn = document.getElementById('recomendar-btn'); function recomendarFilme() { const indiceAleatorio = Math.floor(Math.random() * filmes.length); const filmeEscolhido = filmes[indiceAleatorio]; imagemFilme.src = filmeEscolhido.imagem; imagemFilme.alt = `Imagem do filme ${filmeEscolhido.titulo}`; tituloFilme.textContent = filmeEscolhido.titulo; resumoFilme.textContent = filmeEscolhido.resumo; // Limpa trechos anteriores trechosFilme.innerHTML = ''; // Adiciona os novos trechos filmeEscolhido.trechos.forEach(trecho => { const p = document.createElement('p'); p.textContent = `"${trecho}"`; trechosFilme.appendChild(p); }); } // Recomenda um filme ao carregar a página document.addEventListener('DOMContentLoaded', recomendarFilme); // Adiciona um evento de clique no botão para recomendar outro filme recomendarBtn.addEventListener('click', recomendarFilme);