Para substituir o prompt pela mesma interface usada ao adicionar tarefas. No início, declare variáveis para rastrear a tarefa e o elemento sendo editado:
let tarefaEmEdicao = null;
let paragrafoEmEdicao = null;
Substitua o código do botao.onclick para abrir o formulário de edição:
botao.onclick = () => {
if (tarefa.completa) return; // Impede edição se tarefa está concluída
// Preenche o formulário com a descrição atual
formAdicionarTarefa.classList.remove("hidden");
textarea.value = tarefa.descricao;
// Armazena a tarefa e o parágrafo sendo editados
tarefaEmEdicao = tarefa;
paragrafoEmEdicao = paragrafo;
};
Modifique o listener do formulário para diferenciar entre adição e edição:
formAdicionarTarefa.addEventListener("submit", (evento) => {
evento.preventDefault();
if (tarefaEmEdicao) {
// Modo Edição: Atualiza tarefa existente
tarefaEmEdicao.descricao = textarea.value;
paragrafoEmEdicao.textContent = textarea.value;
atualizarTarefas();
// Reseta o estado de edição
tarefaEmEdicao = null;
paragrafoEmEdicao = null;
} else {
// Modo Adição: Cria nova tarefa
const novaTarefa = {
descricao: textarea.value,
completa: false
};
tarefas.push(novaTarefa);
const elementoTarefa = criarElementoTarefa(novaTarefa);
ulTarefas.append(elementoTarefa);
atualizarTarefas();
}
// Limpa e oculta o formulário
textarea.value = "";
formAdicionarTarefa.classList.add("hidden");
});
(Opcional) Atualize o Botão de Adicionar Tarefa Para cancelar a edição ao clicar no botão de adicionar:
btnAdicionarTarefa.addEventListener("click", () => {
if (formAdicionarTarefa.classList.contains("hidden")) {
// Se o formulário estava oculto, reseta a edição
tarefaEmEdicao = null;
paragrafoEmEdicao = null;
textarea.value = "";
}
formAdicionarTarefa.classList.toggle("hidden");
});
botões de cancelar e deletar da interface:
const btnCancelar = document.querySelector('.app__form-footer__button--cancel');
const btnDeletar = document.querySelector('.app__form-footer__button--delete');
// Função para resetar o estado do formulário
function resetarFormulario() {
formAdicionarTarefa.classList.add('hidden');
textarea.value = '';
tarefaEmEdicao = null;
paragrafoEmEdicao = null;
}
// Evento do botão Cancelar
btnCancelar.addEventListener('click', () => {
resetarFormulario();
});
// Evento do botão Deletar
btnDeletar.addEventListener('click', () => {
if (tarefaEmEdicao) {
// Remove a tarefa do array
const index = tarefas.findIndex(t => t === tarefaEmEdicao);
if (index > -1) {
tarefas.splice(index, 1);
atualizarTarefas();
// Remove o elemento da DOM
const liParaRemover = paragrafoEmEdicao.closest('li');
liParaRemover.remove();
}
}
resetarFormulario();
});
// Modifique o evento de submit do formulário
formAdicionarTarefa.addEventListener('submit', (evento) => {
evento.preventDefault();
if (!textarea.value.trim()) {
alert('Digite uma descrição válida!');
return;
}
if (tarefaEmEdicao) {
// Modo Edição
tarefaEmEdicao.descricao = textarea.value;
paragrafoEmEdicao.textContent = textarea.value;
} else {
// Modo Criação
const novaTarefa = {
descricao: textarea.value,
completa: false
};
tarefas.push(novaTarefa);
const elementoTarefa = criarElementoTarefa(novaTarefa);
ulTarefas.append(elementoTarefa);
}
atualizarTarefas();
resetarFormulario();
});
Fiz essas mudanças pois era algo que me incomodava muito espero que seja útil.