É hora de adicionar a funcionalidade necessária para editar tarefas à sua To-do-lista. Neste guia, você aprenderá como criar e configurar a página de edição (Edit Task Page) para ajustar eficientemente as tarefas existentes. Você começará com uma estrutura HTML existente e fará ajustes para criar um ambiente adequado para a edição.
Principais aprendizados
- A Edit Task Page é essencialmente baseada na New Task Page, com algumas mudanças decisivas.
- É importante usar IDs para as tarefas individuais para que possam ser identificadas de forma única.
- A técnica Hide-and-Show é utilizada para navegar entre as páginas e as diferentes funcionalidades.
Guia passo a passo
1. Criando a página Edit Task
Primeiro, precisamos projetar a página Edit Task em nossa aplicação. Você pode copiar o código HTML da New Task Page e ajustá-lo conforme necessário. O cabeçalho permanece o mesmo, mas os botões devem ter seus nomes alterados. Em vez de "cancel new task Button", você o chamará de "cancel edit task Button".
Agora, você ajusta o segundo botão. Altere o nome para "edit task save button", que irá salvar a tarefa. Esta nova função deve permitir que o usuário salve a tarefa que ele está editando.
2. Configurando a área de conteúdo
A área de conteúdo da sua nova página de edição é definida por um formulário especial para Edit Tasks. Em vez do "add Task Form", você usará o "edit Task Form". Isso significa que você precisa mudar os IDs e rótulos conforme necessário. Use "edit task name" e "edit task description" em vez das nomenclaturas de formulário anteriores.
Usando IDs, você pode acessar diretamente os elementos relevantes do DOM. Isso é especialmente importante para editar as tarefas individuais posteriormente.
3. Revisando a interface do usuário (UI)
Para atualizar a UI da sua To-do-list, agora você precisa adicionar funções que permitam à interface do usuário chamar a Edit Task Page. Isso deve ser feito em sua lista de tarefas existente. Certifique-se de que as funções existentes, como "Show Homepage" e "Init New Task Page", agora também estão complementadas para a Edit Task Page.
Aqui, adicione a nova função "bind button events". Isso garante que os eventos de botão corretos sejam redirecionados.
4. Inserindo a lógica para salvar e cancelar
Agora você implementa a lógica na página Edit Task. Comece lidando com o "cancel edit task button". Quando este botão for clicado, o usuário deve ser levado de volta à página inicial. Você pode fazer isso simplesmente chamando a função "Show Homepage".
Em seguida, vem o salvamento das edições especificadas. Para isso, você precisa de uma função que identifique a tarefa atual. Isso acontece através do ID que você definiu na lista de tarefas.
5. Consultando os cliques nas tarefas
Para descobrir qual tarefa deve ser editada, você precisa implementar a lógica "get target ID". Quando uma tarefa é selecionada, o ID é determinado para que as alterações sejam aplicadas à tarefa correta.
É especialmente importante que você determine qual elemento na estrutura DOM (Modelo de Objeto do Documento) foi clicado. Quando o usuário clica na tarefa, o elemento da lista correspondente deve ser encontrado e seu ID devolvido.
6. Editando e excluindo tarefas
A última fase consiste em editar ou excluir as tarefas conforme necessário. Quando uma tarefa deve ser excluída, você utiliza o ID para garantir que está removendo a tarefa correta de sua lista. Aqui, você aplica uma consulta para descobrir se o elemento "complete task" foi clicado. Se sim, a tarefa é excluída.
Caso contrário, a Edit Task Page é chamada para continuar com a edição da tarefa escolhida.
Resumo – Editando a To-do-list: Guia passo a passo para JavaScript e jQuery
Neste guia passo a passo, você aprendeu como criar uma página Edit Task para sua To-do-list e como implementar as funções necessárias para editar tarefas de forma eficaz. Você adquiriu insights sobre como as IDs são importantes para definir os elementos de forma única e como navegar entre diferentes páginas do seu aplicativo.
Perguntas frequentes
Posso editar várias tarefas ao mesmo tempo?Isso não está coberto neste guia, mas com programação adicional isso poderia ser possível.
O que acontece se eu excluir uma tarefa?A tarefa clicada será removida da lista e a UI será atualizada.
Posso desfazer as alterações?No momento, não há função de desfazer. As alterações são efetivas imediatamente.
Funciona também em dispositivos móveis?Sim, desde que a interface do usuário seja responsiva, deve funcionar bem em dispositivos móveis.
