Front-endInicianteNão iniciado

To-Do List com JavaScript

Criar uma lista de tarefas funcional com JavaScript puro.

em 1 a 2 semanas
6 a 12 h
em 1 a 2 semanas
o que você entrega
Site no ar + repositório
o que você entrega
com checkpoint
5 etapas
com checkpoint
de aceite
8 requisitos
de aceite
0 de 5 etapas

Por que este projeto

Você abre o celular de manhã e tem cinco coisas para não esquecer. A lista de tarefas é o app mais simples que existe e, por isso, o melhor lugar para aprender o que todo app faz: reagir a um clique, guardar informação e mostrar de novo quando a página recarrega. Quem consegue fazer uma lista de tarefas funcionar sem framework entende o DOM, eventos e localStorage, que são a base de tudo que vem depois.

Você vai sair sabendo

Manipular o DOM com JavaScript puroReagir a eventos de clique e tecladoGuardar dados no navegador com localStorageOrganizar o código em funções pequenasPublicar um app estático no GitHub Pages

O que precisa estar lá no fim

É o contrato do projeto. Quando os 8 estiverem verdade, você terminou.

  • Um campo de texto e um botão (ou a tecla Enter) adicionam uma tarefa à lista
  • Clicar na tarefa ou num checkbox marca como concluída, com visual diferente (riscada ou apagada)
  • Cada tarefa tem um botão para remover
  • As tarefas continuam lá depois de recarregar a página
  • Quando não há tarefas, a tela mostra uma mensagem em vez de ficar em branco
  • O app abre num link público (GitHub Pages ou Netlify) sem erro
  • README com o que é o app, o link no ar, um print e o que você aprendeu
  • Pelo menos 5 commits com mensagens que dizem o que mudou

Etapas

  1. Estrutura

    1 h
    • Crie index.html com um formulário (input e botão) e uma lista vazia (ul).
    • Crie style.css com o visual básico e uma classe para tarefa concluída.

    Pronto quando: A página abre com o campo, o botão e a lista, mesmo que nada funcione ainda.

  2. Adicionar tarefa

    1 a 2 h
    • Em app.js, guarde as tarefas num array.
    • Escute o submit do formulário, adicione ao array e desenhe a lista do zero a partir dele.

    Pronto quando: Digitar e apertar Enter faz a tarefa aparecer na lista.

  3. Concluir e remover

    1 a 2 h
    • Cada item ganha um clique para alternar concluída e um botão para remover.
    • Toda mudança altera o array e redesenha a lista.

    Pronto quando: Dá para marcar, desmarcar e remover qualquer tarefa.

  4. Persistir

    1 h
    • Depois de cada mudança, salve o array no localStorage.
    • Ao carregar a página, leia do localStorage antes de desenhar.

    Pronto quando: Recarregar a página mantém as tarefas e o estado de concluída.

  5. Publicar

    30 min
    • Suba para o GitHub, escreva o README com print e link, ative o GitHub Pages.

    Pronto quando: O link abre numa aba anônima e a lista funciona lá.

Entrega

Terminou? Marque a conclusão e o projeto vira parte do seu perfil.

Depois

Post pronto para o LinkedIn

Fiz um app que lembra o que eu esqueço. Uma lista de tarefas em JavaScript puro: adiciona, marca, remove e continua lá quando a página recarrega. Parece simples. Fazer funcionar sem framework ensinou mais do que eu esperava. O que entrou na minha cabeça de vez: • Manipular o DOM e reagir a eventos • Guardar dados no navegador com localStorage • Desenhar a tela a partir de um array, sempre O bug que mais me travou foi [conta aqui]. Publicado no GitHub Pages. Link nos comentários. #javascript #frontend #dom #boranatech

Próximo projetoBuscador de CEP com APIFront-end · Iniciante