---

[M1S05] TODO List - Part 1

Criar uma aplicação web, utilizando HTML, CSS e JavaScript, onde os usuários poderão digitar uma tarefa e adicioná-la a uma lista, e então poderão gerenciar essa lista marcando a tarefa como concluída ou excluindo a tarefa da lista.

Tarefas

📌 Iniciando o projeto de TODO List | source code: v1.0

• Construa um documento HTML5, chamado index.html, em que a linguagem seja português do Brasil (pt-br), o conjunto de caracteres seja UTF-8, e que o conteúdo preencha toda a área do navegador. ✔️

• Defina um título para aparecer na aba do navegador, indicando do que se trata essa página, para que o usuário encontre a sua aplicação no meio das várias abas que constantemente mantém abertas. ✔️

📌 Primeiros elementos da TODO List | source code: v1.1

• Adicione um cabeçalho dentro da página, para que o usuário saiba facilmente em que página se encontra e do que se trata o conteúdo. ✔️

• Adicione também um campo de texto para digitar o nome de uma nova atividade a ser adicionada à lista. ✔️

• Insira na página um botão, que irá adicionar o texto digitado pelo usuário como uma tarefa na lista. (nesse primeiro momento o botão não fará nada, você só precisa inserir o elemento no documento HTML) ✔️

• Coloque na página também uma lista não ordenada, onde serão adicionados os itens criados pelo usuário. ✔️

📌 Checkbox e Lixeira | source code: v1.2

• Adicione caixas de seleção, uma para cada item da lista. ✔️

• Adicione botões de remover (“x“) para cada item da lista. ✔️

• Com CSS, remova os pontos da lista e o espaçamento à esquerda. ✔️

📌 Extras: refatoração e estilização | source code: v2.0

• Estilização adicional com CSS. ✔️

• Adição de ícones. ✔️

• Adição de background SVG. ✔️

[M1S06] TODO List - Part 2

Os requisitos do Ex. 1 e do Ex. 3 já foram atendidos na v2.0.

Tarefas

📌 Estilizando a lista | source code: v2.1

• Botão de excluir deve ser sucinto, mas deve indicar de forma correta e fácil o que o botão faz. Pode ser utilizado um ícone. ✔️

• Ajustar espaçamento entre os itens da lista e os elementos de um mesmo item. ✔️

• Criar um estilo para quando a tarefa estiver concluída, ou seja, o checkbox estiver marcado. Nesse caso, o texto deve ser tachado (line-through). ✔️

📌 Adicionando itens na lista | source code: v2.2

• Verificar se existe alguma atividade descrita; ✔️

• Criar um novo elemento na lista. ✔️

[M1S07] TODO List - Part 3

Os requisitos dos Ex. 1, Ex. 2 e Ex. 4 serão atendidos na v3.0.

Tarefas

📌 Excluindo uma tarefa | source code: v3.0

• Deve remover apenas o item correspondente da lista, mantendo todos os outros. ✔️

• E se o usuário clicar sem querer no botão excluir? Essa remoção é definitiva, então seria uma boa ideia confirmar com o usuário se ele realmente deseja fazer isso. ✔️

• Deve ser calculado o número de tarefas na lista e exibido em algum lugar da tela. ✔️

[M1S08] TODO List - Part 4

Os requisitos dos Ex. 1, Ex. 2, Ex. 3 e Ex. 4 serão atendidos na v4.0.

Tarefas

📌 Função para criar tarefa | source code: v4.0

• Crie uma função para adicionar uma tarefa a lista de tarefas no localStorage. ✔️

📌 Função para marcar tarefa como concluída | source code: v4.0

• Cria uma função para atualizar uma tarefa existente no localStorage. ✔️

📌 Função para remover tarefa | source code: v4.0

• Cria uma função para remover uma tarefa existente do localStorage. ✔️

📌 Função para listar todas as tarefas | source code: v4.0

• Crie uma função para ler todas as tarefas salvas no localStorage. ✔️

Demonstração

Veja uma demo da aplicação aqui.