Português · English
> module: sem-03
> tema: interface web (dinâmica)
> status: online
> coffee loaded
Material da Semana 03 da trilha do Coffee & Code, clube de tecnologia fundado por estudantes de Engenharia de Software da PUCPR e aberto a todos que querem aprender construindo.
Na Semana 02 você construiu as três telas em HTML e CSS. Elas abrem no navegador, se ajustam ao celular. Mas não fazem nada. O formulário de Login aceita qualquer coisa, o Dashboard mostra sempre os mesmos cards fixos, o botão de sair de um grupo não sai de lugar nenhum.
A Semana 03 existe para dar comportamento a essas telas: JavaScript ES6+, DOM, eventos, validação de formulários e dados em JSON. No fim da semana a interface reage, valida e renderiza, ainda sem backend, mas com lógica de verdade.
Sobre o idioma: o material em inglês fica em
docs-eng/, com a mesma estrutura dedocs/; os READMEs têm versão em inglês com o sufixo.en.md.
docs/00-comece-aqui.md: leia este primeiro. Ele explica o caminho da semana e o que vem da Semana 02.
Depois, siga os módulos na ordem:
| # | Módulo | Sobre |
|---|---|---|
| 01 | Como o JavaScript entra na página | <script>, defer, console do navegador |
| 02 | Variáveis, tipos e operadores | let/const, tipos primitivos, === |
| 03 | Decisões e repetições | if/else, for, while, for...of |
| 04 | Funções e arrow functions | Funções, arrow functions, escopo |
| 05 | Arrays e métodos essenciais | .map(), .filter(), .find() |
| 06 | Objetos e desestruturação | Objetos, desestruturação |
| 07 | O DOM: selecionar e ler | querySelector, .value, .textContent |
| 08 | O DOM: criar e modificar elementos | classList, createElement, innerHTML |
| 09 | Eventos | addEventListener, event.preventDefault() |
| 10 | Formulários e validação em JS | Validação completa do Login |
| 11 | JSON e dados mock | JSON, JSON.stringify/parse, dados mock |
| 12 | Renderizando listas dinamicamente | Array de dados → cards na tela |
| 13 | Estado e componentização | Estado, ciclo de renderização, componentização |
| 14 | Projeto guiado | Construindo as três telas dinâmicas, do início ao fim |
E, para consultar quando precisar:
- Exemplo executável: as três telas com JavaScript real, para consulta
- Desafios: opcionais, para ir além do pedido
- Entregável: checklist final antes de fechar a semana
A pasta docs/example/ tem uma implementação de referência das três telas (Login, Dashboard, Perfil), evoluindo o exemplo da Semana 02 com JavaScript real. Baixe o repositório e abra o index.html no navegador para navegar entre elas.
É material de consulta, não gabarito. O seu projeto tem as suas próprias telas: o exemplo serve para você ver uma solução possível quando travar, não para copiar.
Ao final da Semana 03, o repositório do seu projeto (não este aqui) deve ter, além de tudo o que veio das Semanas 01 e 02:
login.html
dashboard.html
perfil.html
script.js ← novo (ou um por tela), conectado às páginas com defer
css/
└── styles.css
O Login precisa validar de verdade, o Dashboard precisa renderizar e filtrar os cards a partir de dados mock, e o Perfil precisa ter pelo menos uma ação funcionando sem recarregar a página.
O checklist completo está em docs/entregavel.md.
A lógica correta vale mais que polimento visual. Uma validação que bloqueia corretamente um e-mail mal formatado, mesmo com uma mensagem simples, vale mais nesta semana do que uma interface bonita que aceita qualquer coisa.
Projetos de quem entregou a Semana 03. Quer entregar o seu? Veja como entregar.
| Pessoa | Projeto | Sobre | Links |
|---|---|---|---|
| Luis Medina | Estom | Monitoramento de preços de produtos online | pasta · Figma · ver telas |
| Mikhail Kalinin | Learnplat | Plataforma de cursos online que conecta professores e alunos | pasta · ver telas |
| Pedro Henrique Gouveia | Sem nome definido | Login, cadastro, dashboard de matérias com busca e perfil | pasta · ver telas |
| Rodrigo Fagnani | FixAqui | Conecta clientes a profissionais de pequenos serviços | pasta · Figma · ver telas |
Nada de backend, banco de dados ou chamada de rede real. Nada de framework (React ou equivalente); tudo em JavaScript puro, de propósito. E os dados mock resetam a cada recarregamento de página: isso é esperado.
Todos os módulos usam o mesmo projeto fictício das semanas anteriores: o Buscador de Grupos de Estudo. Se você tem um projeto próprio, o raciocínio de cada módulo se aplica da mesma forma: só troque o nome.
O Coffee & Code é 100% online. Cada módulo foi escrito para ser autossuficiente: você estuda no seu ritmo, pode avançar mais rápido, voltar em semanas anteriores e consultar o material durante o projeto.
Os encontros semanais, também online, existem para tirar dúvidas, revisar conceitos, programar junto e mostrar o que você produziu, não para dar aula:
- quarta-feira: 20h00 às 21h30
- sábado: 10h00 às 11h30
Os dois trabalham o mesmo conteúdo. Escolha o que couber melhor na sua semana, e não precisa ficar o horário inteiro na call.
Chega no encontro ou no Discord com uma pergunta específica. "meu botão renderizado dinamicamente não responde a clique, já tentei X e Y" costuma ser resolvido muito mais rápido do que "meu JavaScript não funciona".
E lembra: não saber alguma coisa não é problema. Saber pesquisar faz parte da área.
Todos os diagramas usados nos módulos estão em docs/assets/, em formato SVG editável.
Trilha completa e próximas semanas: perfil do Coffee & Code
HTTP 418: I'm a teapot
> ready to code