Grande desafio: dá vida a todo o teu site

A missão final do Nível 2. Todos os feitiços de uma vez – mais algumas ideias novas.

A tua missão

Desta vez não há material novo. Recebes uma lista de tarefas e já sabes tudo o que precisas. É exatamente assim que é o trabalho de um programador a sério: recebes requisitos e montas-os com coisas que já conheces.

Parte obrigatória 🎯

Percorre o teu site e certifica-te que os cinco feitiços deste nível estão vivos nele:

O script ligado em cada página e sem erros na consola (F12 – nada a vermelho).
Modo escuro – um interruptor no cabeçalho de cada página, e a escolha é lembrada.
Um botão ou contador interativo – pelo menos um feitiço com variável e condição.
Uma galeria de fotos com lightbox – clicar faz uma foto crescer.
Um quiz ou um formulário com validação – pelo menos um dos dois. Podes fazer os dois!

Extensões opcionais 🌟

Escolhe pelo menos uma (ou inventa a tua):

Saudação conforme a hora do dia

O site cumprimenta de forma diferente de manhã e à noite:

<p id="day-greeting"></p>

const dayGreeting = document.getElementById("day-greeting");
const hour = new Date().getHours();

if (hour < 9) {
  dayGreeting.textContent = "Good morning! ☀️";
} else if (hour < 18) {
  dayGreeting.textContent = "Hi there, have a nice day!";
} else {
  dayGreeting.textContent = "Good evening! 🌙";
}

new Date() devolve a data e hora atuais, .getHours() tira a hora.

Mensagem aleatória ao clicar

Uma piada, ideia de viagem ou cântico de equipa diferente cada vez:

const messages = [
  "Practice makes perfect!",
  "Let's go, Eagles! 🦅",
  "You miss every shot you don't take.",
  "Fans are the twelfth player.",
];

const messageButton = document.getElementById("message-button");
const messageEl = document.getElementById("message");

messageButton.addEventListener("click", () => {
  const random = Math.floor(Math.random() * messages.length);
  messageEl.textContent = messages[random];
});

Math.random() devolve um número aleatório entre 0 e 1, e o resto da linha transforma-o numa posição aleatória no array.

Contador de visitas (só para ti)

Quantas vezes abriste o teu site? Guarda em localStorage:

let visits = Number(localStorage.getItem("visits") ?? 0);
visits++;
localStorage.setItem("visits", visits);
console.log("You've opened this page " + visits + " times now");

Number(...) converte texto da memória em número, e ?? 0 significa «se não houver nada, começa do zero.»

Secção recolhível (acordeão)

Esconde um menu longo ou plantel sob um título clicável:

const sectionHeading = document.getElementById("expand-heading");
const sectionContent = document.getElementById("expand-content");

sectionHeading.addEventListener("click", () => {
  sectionContent.classList.toggle("hidden");
});

Já tens a classe .hidden { display: none !important; } da lição da galeria.

Carrega a nova versão para a internet

O teu site no GitHub Pages ainda é a versão antiga do Nível 1! Carrega a nova:

Abre o teu repositório em github.com,
Add file → Upload files,
arrasta os ficheiros alterados (principalmente script.js, style.css e todos os .html) e clica Commit changes.

Num minuto, os teus feitiços vão estar a correr para todos verem.

✅

Parabéns, Mago! 🪄 O teu site já não é só bonito – está vivo. Reage a cliques, lembra escolhas, faz perguntas e responde. E sabes como funciona cada linha. No Nível 3 – Mestre, vais aprender a construir sites como os profissionais: React, componentes e o teu próprio servidor.

O que ficas a saber deste nível

JavaScript: variáveis, condições, funções, arrays, objetos, ciclos – os fundamentos de toda a programação.
A fórmula do feitiço: encontrar um elemento → ouvir um evento → tomar uma ação.
localStorage para lembrar coisas, querySelectorAll + forEach para grupos de elementos, verificação de entradas de formulários.