Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

texto nao fica riscado ao clicar no botão concluir

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;
}
2 respostas
solução!

Fala Cristiana, tudo bem? Espero que sim!

Na função criarTarefa você realiza um appendChild do BotaoConclui() a lista e não a tarefa criada, sendo assim, na função de concluir tarefa você realiza o parentElement e é retornada a lista e não a tarefa. Então deve ficar assim:

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
    tarefa.appendChild(BotaoConclui())
    lista.appendChild(tarefa)


    input.value = " "

}

Espero ter ajudado, abraços e bons estudos :D

Obrigada Matheus!!!!