Solucionado (ver solução)

Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

Solucionado
(ver solução)
2
respostas

[Projeto] Implementando a funcionalidade de cancelar

Olá, tudo bem?

No arquivo ui.js, após o fechamento das chaves da função adicionarPensamentoNaLista(), criei a função cancelarPensamentoNaLista(). Aqui está o trecho da função implementada:

cancelarPensamentoNaLista() {
    const botao_cancelar_pensamento = document.getElementById("botao-cancelar");
    botao_cancelar_pensamento.addEventListener("click", () => {
      document.getElementById("pensamento-conteudo").value = "";
      document.getElementById("pensamento-autoria").value = "";
    });
  },

No arquivo main.js, embaixo da linha ui.renderizarPensamentos(), dentro do EventListener("DOMContentLoaded"), chamei a função criada no outro arquivo — cancelarPensamentosNaLista.

document.addEventListener("DOMContentLoaded", () => {
  user_interface.renderizarPensamentos();
  user_interface.cancelarPensamentoNaLista();

Ao testar a implementação no computador, tive um resultado positivo. Gostaria de saber, se possível, se essa maneira de adicionar a função de cancelar o pensamento no projeto está correta.

Caso seja necessário, aqui está o projeto atual no GitHub: https://github.com/diegofc2002/projeto-memoteca.

Desde já, agradeço.

2 respostas
solução!

Oi, Diego! Como vai?

Agradeço por compartilhar seu código com a comunidade Alura.

Sim, a forma como você implementou a funcionalidade de cancelar está correta e atende ao objetivo da atividade. Você criou uma função específica para essa responsabilidade no arquivo ui.js, adicionou o addEventListener ao botão de cancelamento e realizou a chamada da função no main.js após o carregamento da página. Essa organização ajuda a manter o código mais modular e fácil de entender. Além disso, ao limpar os campos por meio da propriedade value = "", você garante que o formulário volte ao estado inicial quando o usuário clicar em cancelar.

Uma dica interessante para o futuro é utilizar o método reset() quando os campos estiverem dentro de um formulário. Veja este exemplo:


const formulario = document.getElementById("formulario");

formulario.reset();

Esse código limpa todos os campos do formulário automaticamente, reduzindo a necessidade de limpar cada campo individualmente e facilitando futuras manutenções.

Parabéns pelo ótimo trabalho!

Alura

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

Olá, Rafaela! Espero que esteja bem.

Muito obrigado pela atenção e resposta. Agradeço também pela dica e explicação sobre o método reset(). Realmente, essa abordagem tornaria futuras manutenções mais simples e deixaria o código mais simples.

Tenha um excelente dia!