Aula concluida com script comentado, linha a linha.
(() =>{
/* Função para encapsular o script.*/
const criarTarefa = (evento) => {
/* Criamos uma função com várias ações necessárias para leitura e inserção de valor no formulario HTML. */
evento.preventDefault()
/* Criamos uma metodo no JS com ligação a um elemento do HTML, para mudar o comportamento do formulario. */
const lista = document.querySelector('[data-list]')
/* Criamos uma constante no JS com ligação a um elemento do HTML, neste caso o 'ul' onde são armazenados
os 'li' da lista, tag responsavel por armazenar as informações da lista */
const input = document.querySelector('[data-form-input]')
/* Criamos uma constante no JS com ligação a um elemento do HTML, neste caso, o 'input', local onde os usuarios inserem a informação. */
const valor = input.value
/* Criamos uma constante no JS para capturar as informações da constante 'input'
usando o metodo 'value' */
const tarefa = document.createElement('li')
/* Criamos uma constante no JS com ligação a um elemento do HTML, para criar uma TAG 'li' no html. */
tarefa.classList.add('task')
/* Utilizamos o metodo 'classList' no JS para buscar uma 'class' salva no html e 'add'(adicionar)
ao conteudo da constante 'tarefa'. */
const conteudo = `<p class = 'content'> ${valor} </p>`
/* Criamos uma constante no JS com ligação a um elemento do HTML, para inserir um <p> no html
adicionando as informações capturadas na constante 'valor' */
tarefa.innerHTML = conteudo
/* Usamos o metodo 'innerHTML para inserimos no HTML as informações da constante 'tarefa' (criar uma '<li>')
e adicionarmos neste 'li, as informações da constante 'conteudo'(cria um <p> com dados capturados) */
tarefa.appendChild(BotaoConcluir())
/* Criação do Botão concluir , contido na função 'BotaoConcluir', na estrutura 'filha (<li>)' utilizando a referencia
da estrutura 'pai <ul> (data-lista)' da tabela) */
lista.appendChild(tarefa)
/* Metodo de inserção das informações, contidas na constante 'conteudo', na estrutura 'filha (<li>)' utilizando a referencia
da estrutura 'pai <ul> (data-lista)' da tabela) */
input.value = ''
/* Utilizamos o metodo 'value' recebendo um valor vazio('') apos o processo, para deixar em branco
o 'input' */
}
const novaTarefa = document.querySelector('[data-form-button]')
/* Criamos uma constante no JS com ligação a um elemento do HTML, neste caso o botão(Novo Item) do formulário. */
novaTarefa.addEventListener('click',criarTarefa)
/* O ADDEVENTLISTERNER busca no HTML a ação desejada, no exemplo acima essa ação é o 'click'.
Nos parenteses desse item colocamos a seguinte ordem:
1º a ação que iremos buscar no local indicada, neste exemplo buscamos o click na constante 'novaTarefa'.
) */
const BotaoConcluir = () => {
/* Função para criar o botão concluir*/
const botaoConcluir = document.createElement('button')
/* Constante com metodo para criação do botão no HTML*/
botaoConcluir.classList.add('check-button')
/* Utilizamos o metodo 'classList' no JS para buscar uma 'class' salva no html e 'add'(adicionar)
ao conteudo da constante 'botaoConcluir'. */
botaoConcluir.innerText = 'Concluir'
botaoConcluir.addEventListener('click',concluirTarefa)
return botaoConcluir
}
const concluirTarefa = (evento) => {
/* Função para sinalizar que concluiu a tarefa*/
const botaoConcluir = evento.target
/* Metodo para localizar onde o mouse clicou (Alvo).*/
const tarefaCompleta = botaoConcluir.parentElement
/* Metodo para localizar o parente pai da seleção( Const botaoConcluir)*/
tarefaCompleta.classList.toggle('done')
/* Metodo para localizar a class ( ClassList) e alterar a class, inserindo a class (done) */
}
})
()
