Aula 22

Prática com Formulários + Estilização 🎨💻

🎯 Objetivos:

• Praticar a criação de formulários HTML

• Trabalhar validação de dados com JavaScript

• Aprender a manipular elementos da página com getElementById

• Personalizar respostas com innerText e style.color

• Aplicar pequenos desafios visuais com CSS

📚 Introdução ao JavaScript na prática

🔹 O que é getElementById()?

• É um comando do JavaScript que acessa qualquer elemento HTML que tenha um id.

• Exemplo: se o HTML tem <p id="mensagem">, você pode mexer nesse parágrafo com:

document.getElementById("mensagem")

🔹 O que é innerText?

• É usado para alterar o texto que aparece dentro de um elemento.

document.getElementById("mensagem").innerText = "Você acertou!";

🔹 O que é style.color?

• Serve para mudar a cor do texto de um elemento.

document.getElementById("mensagem").style.color = "green";

✅ Exercício 2 – 💭 Verificar acesso ao Clube da Imaginação

📝 Regras:

• Idade maior que 10

• Tipo de membro: precisa ser "criança exploradora"

• Mensagem final em verde (entrada liberada) ou vermelho (entrada negada)

🎨 Desafio CSS:

• Altere o botão para amarelo com texto preto

• Faça a borda do select ficar roxa

• Deixe a fonte da resposta em itálico e tamanho 22px

✅ Exercício 3 – 🗼Teste para se tornar Guardião da Torre

📝 Regras:

• Deve responder “sim” à pergunta sobre coragem (radio)

• Deve escolher a chave correta: “chave dourada”

🎨 Desafio CSS:

• Mude o fundo do select para um gradiente leve

• Faça os radio buttons ficarem alinhados horizontalmente

• Adicione sombra ao botão quando passar o mouse

✅ Exercício 4 – ☔ Entrada na Vila da Oculta da Chuva

📝 Regras:

• Deve estar com capa preta (radio sim/não)

• Deve escolher a senha correta ("supera")

🎨 Desafio CSS:

• Altere o fundo da página para um tom bem escuro (#0a0a0a)

• Mude a cor da fonte para cinza claro
  
  

• Ao passaro mouse sobre o botão, faça ele brilhar com box-shadow

• Deixe os radio buttons com borda vermelha ao selecionar

✅ Exercício 5 – 🧪 Recrutamento para Laboratório Secreto

📝 Regras:

Tem autorização do governo
OU experiência científica acima de 3 anos

🎨 Desafio CSS:

• Use uma fonte monoespaçada (ex: Courier New)

• Aplique um fundo de tela com gradiente suave de azul-cinza

• Destaque os campos de entrada com uma borda neon (#00ffff)

• Faça o botão mudar de cor quando for clicado (:active)

✅ Exercício 6 – 🔮 Visão do Futuro

📝 Regras:

Idade acima de 15
E deseja receber a visão (sim)

🎨 Desafio CSS:

• Use um fundo roxo escuro e texto branco

• Faça o botão parecer uma bola de cristal (arredondado, com brilho)

• Altere o cursor para crosshair ao passar sobre o botão

✅ Exercício 7 – 🏁 Corrida Intergaláctica

📝 Regras:

Possui traje espacial aprovado
E energia acima de 80

🎨 Desafio CSS:

• Use uma fonte digital (ex: Orbitron, via Google Fonts)

• Faça o fundo parecer o espaço (gradiente azul escuro e preto)

• Deixe os inputs com bordas pontilhadas ou brilhantes

• Adicione uma animação leve no botão ao passar o mouse

✅ Exercício 8 – 🧠 Cofre do Conhecimento

📝 Regras:

Escolheu o livro correto ("A Verdade Oculta")
E acertou a pergunta secreta ("sim")

🎨 Desafio CSS:

• Fundo com textura de pergaminho (ou cor de papel antigo)

• Use uma fonte serifada clássica (ex: Georgia ou Playfair Display)

• Personalize o select para parecer um menu mágico (borda dourada)

• Altere o botão para ter efeito de “abertura de cofre” (mudança de sombra)

✅ Exercício 9 – Verificar se o aluno pode fazer estágio

📝 Regras:

Idade ≥ 16
E está cursando o ensino médio (sim)

🧾 Campos:

• input type="number" → Idade

• radio → Está cursando o ensino médio? (sim/não)
  
  

🎨 Desafio CSS:

• Alinhar os radio buttons horizontalmente

• Deixar o botão com cor azul e canto arredondado

• Exibir a resposta em verde (liberado) ou vermelho (negado)

✅ Exercício 10 – Acesso ao laboratório de informática

📝 Regras:

Aluno digitou a senha correta: "lab123"
E selecionou o turno: manhã ou tarde

🧾 Campos:

• input type="text" → Senha

• select → Turno (manhã, tarde, noite)
  
  

🎨 Desafio CSS:

• Campos com borda cinza clara

• select com fundo branco e sombra suave

• Botão com cor escura e efeito hover leve

• Cor da mensagem final muda com base no turno escolhido:

  • Manhã = azul

  • Tarde = verde

  • Noite = vermelha

🌪️ Desafio: Tornado da Escolha Final

💡 Contexto:

Você está diante de um fenômeno mágico chamado Tornado da Escolha Final. Para atravessá-lo com segurança, você precisa responder corretamente três critérios. Um erro… e será lançado em outra dimensão.

📝 Regras:

Ter nível de preparo acima de 70
E escolheu o elemento correto: vento
OU recebeu a bênção do oráculo (sim)

🧾 Campos do formulário:

1. input type="number" → Nível de preparo (0 a 100)

2. select → Escolha o elemento (vento, fogo, terra, água)

3. radio → Recebeu a bênção do oráculo? (sim/não)

✅ Exemplo de lógica:

Se preparo > 70 AND elemento === "vento"

OU (orcaculo === "sim")

=> Atravessa o tornado

Senão => Fica preso no redemoinho

🎨 Desafio CSS sugerido:

• Fundo com efeito de redemoinho (gradiente circular)

• Botão com animação giratória ao passar o mouse

• Usar uma fonte leve e inclinada, como se fosse “soprada pelo vento”

• Cores: azul claro e prata, remetendo ao ar

• 💬 Texto para exibir como resposta:

✅ Você atravessou o Tornado da Escolha Final com sucesso!

❌ O Tornado te empurrou de volta. Tente novamente.