13  Projeto Final Integrador

Neste capítulo, você vai aplicar os principais conceitos do livro em um projeto completo.

13.1 Objetivo do projeto

Desenvolver um sistema de cadastro e organização de tarefas escolares.

13.2 Funcionalidades obrigatórias

1. Cadastrar tarefa com título e prazo.
2. Marcar tarefa como concluída.
3. Excluir tarefa.
4. Salvar dados em localStorage.
5. Organizar código em funções e, se possível, módulos.

13.3 Funcionalidades recomendadas

1. Filtro por status (todas, pendentes, concluídas).
2. Busca por texto.
3. Contador de tarefas concluídas e pendentes.
4. Validação de formulário.

13.4 Estrutura sugerida

projeto/
  index.html
  style.css
  app.js

Versão modular:

projeto/
  index.html
  style.css
  src/
    app.js
    storage.js
    tarefas.js
    ui.js

13.5 Modelo da tarefa

const tarefa = {
  id: Date.now(),
  titulo: "Estudar JavaScript",
  prazo: "2026-03-01",
  concluida: false
};

13.6 Etapa 1: interface base

Campos mínimos:

• input de título;
• input de prazo;
• botão de salvar;
• lista de tarefas.

13.7 Etapa 2: estado da aplicação

let tarefas = [];

13.8 Etapa 3: criar tarefas

function criarTarefa(titulo, prazo) {
  return {
    id: Date.now(),
    titulo,
    prazo,
    concluida: false
  };
}

13.9 Etapa 4: renderizar lista

function renderizarTarefas(lista) {
  console.log("Renderizar", lista);
}

Depois substitua o console.log pela renderização real no DOM.

13.10 Etapa 5: concluir e remover

function alternarConclusao(id) {
  tarefas = tarefas.map((t) =>
    t.id === id ? { ...t, concluida: !t.concluida } : t
  );
}

function removerTarefa(id) {
  tarefas = tarefas.filter((t) => t.id !== id);
}

13.11 Etapa 6: persistência

function salvarNoStorage() {
  localStorage.setItem("tarefas", JSON.stringify(tarefas));
}

function carregarDoStorage() {
  const dados = localStorage.getItem("tarefas");
  tarefas = dados ? JSON.parse(dados) : [];
}

13.12 Etapa 7: validação

function validarFormulario(titulo, prazo) {
  if (!titulo.trim()) return "Informe o título da tarefa";
  if (!prazo) return "Informe o prazo";
  return null;
}

13.13 Roteiro de implementação

1. Montar HTML e CSS.
2. Implementar criação de tarefa.
3. Renderizar no DOM.
4. Implementar concluir/remover.
5. Integrar localStorage.
6. Adicionar filtros e busca.
7. Revisar e testar.

13.14 Critérios de avaliação

• funcionamento correto (40%);
• organização e legibilidade (25%);
• uso de boas práticas (15%);
• interface e experiência do usuário (10%);
• documentação do projeto (10%).

13.15 Desafios extras

1. Ordenar por prazo.
2. Destacar tarefas atrasadas automaticamente.
3. Exportar tarefas em JSON.
4. Criar modo escuro com botão de alternância.

13.16 Entrega sugerida

1. Repositório com código fonte.
2. README.md com instruções de uso.
3. Capturas de tela da aplicação.
4. Lista de melhorias futuras.