Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Sugestão] Algumas mudanças. Para substituir o prompt pela mesma interface

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.

1 resposta
solução!

Olá, Priscila, como vai?

Agradeço pela sua contribuição. Sua sugestão de modificar a interface de edição de tarefas é bastante pertinente e pode melhorar a experiência dos usuários. Contribuições como essa enriquecem a comunidade, trazendo soluções práticas para desafios comuns no desenvolvimento.

Se quiser discutir outras melhorias ou compartilhar mais ideias, o fórum está à disposição.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!