Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Conclusão

Nesse capítulo, construímos uma página web que busca dados da API e os renderiza com HTML, CSS e JavaScript puros. Os 12 eventos do TamoJunto saíram do banco de dados, passaram pelo backend e chegaram na tela do navegador. Ao mesmo tempo, sentimos a fricção da manipulação direta do DOM: manter múltiplas partes da interface em sincronia com o mesmo dado é trabalhoso e frágil. Componentes resolvem exatamente esse problema.

Exercícios

  1. Adicione uma barra de busca (<input>) no topo da página. Quando o usuário digita, filtre os cards para mostrar apenas eventos cujo título contém o texto digitado. Use o evento "input" no <input> e a propriedade style.display para esconder/mostrar os cards.

  2. Modifique o card para exibir a data do evento formatada de duas formas: data completa (ex: “segunda-feira, 15 de setembro de 2026”) e apenas o horário (ex: “08:00”). Consulte as opções de toLocaleString na MDN.

  3. Adicione um estado “loading” à página: antes do fetch retornar, mostre o texto “Carregando eventos…” dentro do contêiner. Quando os dados chegarem, substitua pelo conteúdo real. Dica: use container.textContent para limpar e depois appendChild para popular.

  4. Trate erros no fetch: se a requisição falhar (servidor fora do ar, rede sem conexão), mostre uma mensagem de erro no lugar da lista. Use try/catch ao redor do fetch e response.ok para checar se a resposta é 2xx.

  5. Implemente o botão RSVP como um toggle: o primeiro clique marca como “Confirmado ✓” (verde), o segundo clique desmarca (volta ao estado original). Use classList.toggle para alternar uma classe CSS.

  6. Adicione ordenação à lista: dois botões no topo (“Por data” e “Por capacidade”) que reordenam os cards. Você pode reordenar o array de eventos e re-renderizar a lista do zero, ou manipular a ordem dos elementos existentes no DOM. Tente as duas abordagens e compare.

Referências

A MDN Web Docs é a referência definitiva para HTML, CSS e JavaScript no navegador. Os guias de aprendizado são um bom ponto de partida: