Eu cheguei a fazer uns testes para ver qual seria o resultado de tirar o return
de cada função. E acabou que não funcionava o botão ou nem aparecia a tarefa. E achei estranho a aplicação funcionar normalmente sem o return
na última função do código abaixo:
Código da última função
const deletarTarefa = (evento) => {
const botaoDeleta = evento.target;
const tarefaCompleta = botaoDeleta.parentElement;
tarefaCompleta.remove(); // método(função) que remove
return botaoDeleta;
}
Código completo
// Função de invocação imediata ==> Vamos utilizar a “IIFE”, ou Immediately Invoked Function Expression ou “Função de Invocação Imediata”. Faz com o que ninguém tenha acesso a nenhuma função de dentro do código, apenas tenha acesso a interação com a página
(() => {
const criarTarefa = (evento) => {
evento.preventDefault();
const lista = document.querySelector('[data-list]');
const input = document.querySelector('[data-form-input]');
const valor = input.value;
const tarefa = document.createElement('li'); /* Cria um novo elemento */
tarefa.classList.add('task'); /* Adciona a classe na 'li' criada */
const conteudo = `<p class="content">${valor}</p>`; /* “Template String” */
tarefa.innerHTML = conteudo; /* Faz aparecer a tag 'p' com o seu valor dentro das chaves */
tarefa.appendChild(BotaoConclui()); /* Cria o botão através da função, com escrita, estilo e evento de click */
tarefa.appendChild(BotaoDeleta());
lista.appendChild(tarefa); /* Cria(anexa) o elemento filho dentro do elemento pai */
input.value = " ";
}
const novaTarefa = document.querySelector('[data-form-button]');
novaTarefa.addEventListener('click', criarTarefa);
const BotaoConclui = () => {
const botaoConclui = document.createElement('button');
botaoConclui.classList.add('check-button'); // add => adiciona o nome da classe que está entre as aspas simples
botaoConclui.innerText = 'concluir'; // Adciona o texto que está entre as aspas simples dentro do botão
botaoConclui.addEventListener('click', concluirTarefa);
return botaoConclui;
}
const concluirTarefa = (evento) => {
const botaoConclui = evento.target; // sabe qual o alvo do evento, ou seja, em quem clicou ou qual elemento foi clicado
const tarefaCompleta = botaoConclui.parentElement; // Sobe um nó na árvore, que é a 'li', ou seja, busca o pai do elemento que é pai do botão
tarefaCompleta.classList.toggle('done'); // .toggle() => Método que executa o efeito de rabisco do CSS e é capturado a classe pelo 'classList'. o toggle faz um verdadeiro ou falso (booleano)
}
const BotaoDeleta = () => { // inicia com letra maiúscula pelo motivo de ser um Componente
const botaoDeleta = document.createElement('button');
botaoDeleta.innerHTML = 'Deletar';
botaoDeleta.addEventListener('click', deletarTarefa);
return botaoDeleta;
}
const deletarTarefa = (evento) => {
const botaoDeleta = evento.target;
const tarefaCompleta = botaoDeleta.parentElement;
tarefaCompleta.remove(); // método(função) que remove
return botaoDeleta;
}
})(); //função de invocação imediata
/* “inner HTML” => altera o valor da li */
/* classList => Acessa a lista de classe que a 'li' disponibiliza. */
/* addEventListener => adciona um evento de escuta */
/* addEventListener('click') => captura o click através do evento de escuta. Esse evento fica escutanto se haverá algum click.
/* appendChild => Existem outros métodos que podemos utilizar para manipular nós:
insertBefore(pai, filho): Coloca um nó antes do outro.
replaceChild( elemento1, elemento2): Substitui o nó elemento 1 pelo nó elemento2.
removeChild(elemento): Remove um nó da árvore. */