Embedded Files
🧙♂️ Criando o Chapéu Seletor de Hogwarts com HTML, CSS e JavaScript
📌 O que vamos fazer?
Vamos construir uma página interativa inspirada no universo de Harry Potter, onde o Chapéu Seletor sorteia aleatoriamente uma das quatro casas de Hogwarts para você. A página terá texto, imagens, estilo e uma função em JavaScript para fazer o sorteio quando clicarmos no chapéu.
✨ Introdução: O Mundo de Harry Potter
Harry Potter é um bruxo que recebe uma carta para estudar em Hogwarts, uma escola de magia. Lá, os alunos são divididos em casas:
Grifinória 🦁 (Coragem e bravura)
Sonserina 🐍 (Ambição e liderança)
Corvinal 🦅 (Inteligência e criatividade)
Lufa-Lufa 🦡 (Lealdade e esforço)
Essa divisão é feita por um Chapéu Seletor, que "lê" sua personalidade e define a casa ideal. Vamos simular esse momento mágico com código!
1️⃣ Estrutura HTML / CSS / JavaScript
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Chapéu Seletor</title>
<style>
/* Estilizar o fundo da página com a cor #3C4A5E */
/* Centralizar todo o conteúdo com text-align */
/* Adicionar padding e remover margem do body */
/* Estilizar títulos com fonte serifada, cor dourada (#E5C364) e estilo itálico */
/* Estilizar parágrafos com fonte Times, cor dourada e margem lateral */
/* Centralizar todas as imagens usando display: block e margin auto */
/* Para a imagem do chapéu, adicionar cursor pointer, transição suave e efeito de zoom no hover */
</style>
</head>
<body>
<!-- Título principal da página -->
<h1>Você chegou em Hogwarts!</h1>
<!-- Inserir imagem do brasão de Hogwarts com largura 200px -->
<img src="LINK_DO_BRASÃO" width="200">
<!-- Parágrafo de boas-vindas -->
<p>
Escreva aqui um parágrafo com um resumo sobre o mundo de Hogwarts, citando as casas Grifinória, Sonserina, Corvinal e Lufa-Lufa.
</p>
<!-- Título para introduzir a interação -->
<h2>Vamos descobrir sua casa?</h2>
<!-- Mensagem explicando que é necessário clicar no chapéu -->
<p>(Clique no chapéu)</p>
<!-- Imagem do chapéu seletor com evento de clique chamando a função casa() -->
<img src="LINK_DO_CHAPÉU" width="300" onclick="casa()" id="chapeu">
<!-- Título que será atualizado com o nome da casa -->
<h2 id="casaEscolhida"></h2>
<!-- Imagem que será atualizada com o brasão da casa -->
<img id="imagemCasa" src="" width="200" style="margin-top: 20px;">
<script>
// Criar uma função chamada casa
function casa() {
// Criar uma variável que receba um número aleatório entre 0 e 3
// Exibir um alerta com uma mensagem de suspense (fala do chapéu)
// Exibir outro alerta com "Hmmm..."
// Criar estrutura if/else para verificar qual número foi sorteado
// Se for 0: mostrar alerta da Grifinória, mudar texto com innerText e imagem com src
// Se for 1: mostrar alerta da Sonserina, mudar texto com innerText e imagem com src
// Se for 2: mostrar alerta da Corvinal, mudar texto com innerText e imagem com src
// Senão: mostrar alerta da Lufa-Lufa, mudar texto com innerText e imagem com src
// (Opcional) Mudar a cor de fundo da página conforme a casa
}
</script>
</body>
</html>
💡 Dicas
🔷Criando o HTML
Crie uma pasta chamada aula21 na sua pasta de Programação Web, dentro da Área de Trabalho.
Dentro dela, crie o arquivo index.html.
📝 Explicações:
Usamos <h1>, <h2>, <p>, <img> para estruturar o conteúdo.
O onclick="casa()" vai ativar a função que vamos criar no JavaScript.
O <h2 id="casaEscolhida"> e a imagem com id="imagemCasa" serão preenchidos dinamicamente.
<p>É com grande alegria que abrimos os portões do castelo para mais um ano letivo na Escola de Magia e Bruxaria de Hogwarts. Ao cruzar estas portas encantadas, você está entrando em um mundo onde feitiços ganham vida, poções revelam segredos antigos e a coragem, a sabedoria, a lealdade e a ambição definem destinos. <br>
Aqui, você aprenderá muito mais do que magia. Fará amizades que durarão para sempre, enfrentará desafios que testarão seu coração e descobrirá quem você realmente é. As quatro casas — Grifinória, Corvinal, Lufa-Lufa e Sonserina — aguardam para recebê-lo com honra e orgulho. <br>
Lembre-se: a magia mais poderosa está dentro de você. Use-a com responsabilidade, coragem e compaixão.<br>
Sejam todos bem-vindos a Hogwarts. Que comecem as aulas!</p>
Comando para imagem clicável:
<img src="" alt="" onclick="functionJS()">
🖱️ onclick="functionJS()"
Esse comando diz: quando o usuário clicar na imagem, execute uma função JavaScript.
Você precisa ter essa função criada no <script>.
🔷Criando o CSS
Dentro da mesma página, adicione a tag <style> dentro do <head>.
Vamos deixar a estética mística e agradável com cores escuras e dourado:
📝 Dicas importantes:
Usamos display: block + margin: auto para centralizar a imagem sem div.
A cor de fundo é #3C4A5E e os textos dourados são #E5C364.
O chapéu ganha um pequeno efeito de zoom ao passar o mouse.
Imagens do projeto
Você deve usar essas imagens no HTML com a tag <img> e o atributo src:
Brasão de Hogwarts:
https://static.wikia.nocookie.net/harrypotter/images/7/7b/250px-Hogwartscrest.png/revision/latest?cb=20121119233851&path-prefix=pt-brImagem do Chapéu Seletor (com onclick):
https://img-estoquenow.s3.amazonaws.com/items/3549/chapeu-seletor-harry-potter_05a506c90174ce8ba419ad9624e26a44.png
🔷Criando o JavaScript
Agora que sua estrutura visual está pronta, vamos adicionar a lógica do sorteio.
Math.random() gera um número aleatório de 0 a 3.
A cada número, mostramos uma mensagem diferente com alert().
A innerText atualiza o nome da casa no título.
A src da imagem muda de acordo com a casa sorteada.
<script>
function casa(){
let numero = Math.floor(Math.random() * 4);
alert("Hmmm... interessante... muito interessante... Você tem qualidades que se encaixam em mais de uma casa... Mas onde, onde, será seu verdadeiro lar? Vamos descobrir...")
alert("Hmmm...")
if (numero == 0){
alert("🦁 Grifinória! Coragem, bravura e um coração ardente! Não foges de um desafio... Ah, sim, vejo que tens alma de um verdadeiro grifinório!")
document.getElementById("casaEscolhida").innerHTML = "🦁 Grifinória!";
📌 Exemplo de estrutura if / else em JavaScript
if (numero == 0) {
alert("O número é 0");
} else if (numero == 1) {
alert("O número é 1");
} else {
alert("O número não é 0 ou 1");
}
🎲 O que Math.random() faz?
let sorteio = Math.random();
📌 Math.random() gera um número decimal aleatório entre 0 e 1, como:
0.2534
0.9821
0.0012
Se quiser gerar números inteiros, você pode multiplicar e arredondar:
let numero = Math.floor(Math.random() * 4); // Gera 0, 1, 2 ou 3
Math.floor() → arredonda para baixo
* 4 → define o intervalo de 0 até 3
✍️ O que faz o innerText?
document.getElementById("mensagem").innerText = "Olá, mundo!";
📌 innerText é usado para alterar o texto dentro de um elemento HTML.
Nesse exemplo, o texto do elemento com id="mensagem" será substituído por "Olá, mundo!".
Você pode usar isso para mostrar resultados na tela, como o nome da casa sorteada, um aviso ou o resultado de um cálculo.
Desafio! 👺
🧠 Desafio Extra
Inclua o brasão de cada casa após a escolha do chapéu.
Tente adicionar um efeito de transição no fundo da página quando a casa mudar, usando:
document.body.style.backgroundColor = "cor_da_casa";
🟥Grifinória 🦁 img: https://static1-br.millenium.gg/articles/6/10/08/6/@/122034-grifinoiaa-article_2_bd-2.png
🟦Corvinal 🦅 img: https://static1-br.millenium.gg/articles/6/10/08/6/@/122036-design-sem-nome-2-article_2_bd-2.png
🟩Sonserina 🐍 img: https://static1-br.millenium.gg/articles/6/10/08/6/@/122038-sonserinaa-article_2_bd-2.png
🟨Lufa-Lufa 🦡 img: https://static1-br.millenium.gg/articles/6/10/08/6/@/122032-imagem-2022-05-18-110006116-article_2_bd-1.png
🔗👁️ Visualizar código completo
⚠️ Caso opte por copiar o código pronto, a nota total será reduzida, mas continuará valendo ponto.
Google Sites
Report abuse