Após fazer a aula 4 fui seguindo passo a passo e ao fim da aula quando clico no botão concluir nao risca a tarefa...vou enviar o trecho do style.css desta classe pra ver se ta diferente e o trecho onde estão as funções
Se alguem perceber onde está o erro me fale por favor. Obrigada!!!
Ja comparei com o arquivo que está no github da aula 4 e achei igualzinho...só se algum detalhezinho muito importante passou despercebido...
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
lista.appendChild(BotaoConclui())
lista.appendChild(tarefa)
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')
botaoConclui.innerText = 'concluir'
botaoConclui.addEventListener('click' , concluirTarefa)
return botaoConclui
}
const concluirTarefa = (evento) => {
const botaoConclui = evento.target
const tarefaCompleta = botaoConclui.parentElement
tarefaCompleta.classList.toggle('done')
}
Style.css
.task.done .check-icon {
background-color: #0B2027;
}
.task.done .content {
text-decoration: line-through;
}