/*Colocar todo o código dentro de ( () => {...código...})() - Função para encapsular o script.
Função de invocação imediata(não exibe modelo de negócio no navegador)*/

( () => {

    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')
    tarefa.classList.add('task')

    const conteudo = `<p class="content">${valor}</p>`
    tarefa.innerHTML = conteudo
    //Coloca o botão dentro da tarefa(tag pai) que é o li
    tarefa.appendChild(BotaoConclui())
    lista.appendChild(tarefa)   
    input.value = " "   

}

const novaTarefa = document.querySelector('[data-form-button]')

novaTarefa.addEventListener('click', criarTarefa)

//Criando um componente
const BotaoConclui = ()=>{
    //Criando um elemento
    const botaoConclui = document.createElement('button')
    //Adicionando uma classe ao botão
    botaoConclui.classList.add('check-button')
    //Adiciona um texto no botão
    botaoConclui.innerText = 'concluir'
    //Criando um evento
    botaoConclui.addEventListener('click', concluirTarefa)

    //Retornar o botão
    return botaoConclui
}

//Criando a função concluir tarefa (Arrow function - função de seta)
const concluirTarefa = (evento) => {
    //Retorna em qual elemento eu cliquei(target - alvo clicado)
    const botaoConclui = evento.target
    //Sobe um nó na árvore do DOM (parentElement - pega o pai do elemento clicado, pai do botão é li)
    const tarefaCompleta = botaoConclui.parentElement
    //Insere envento de rabisco na li
    tarefaCompleta.classList.toggle('done')
}
})()