Texto não fica riscado - Solução Alternativa

Olá galera meu texto não estava ficando riscado, porém o botão concluir estava trocando de cor ao clicar. Fui verificar o css e encontrei essas classes.

.task.done .content {
  text-decoration: line-through;
}

Para corrigir esse probleminha eu criei uma classe no código css.

.done {
  text-decoration: line-through;
}

Agora o código está funcionando normalmente.

Caso alguém queira revisar meu código javascript, vou deixar aqui. Valeu turma!

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;

    //estamos declarando que botão fique dentro do li.
    tarefa.appendChild(botaoConcluir());
    lista.appendChild(tarefa);
    input.value = " ";
}

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

novaTarefa.addEventListener('click', criarTarefa);


const botaoConcluir = () =>{
    const botaoConcluir = document.createElement('button');
    botaoConcluir.classList.add('check-button');
    botaoConcluir.innerText = 'concluir';
    botaoConcluir.addEventListener('click', concluirTarefa);

    return botaoConcluir;
}


const concluirTarefa = (evento) => {
    const botaoConcluir = evento.target;

    const tarefaCompleta = botaoConcluir.parentElement;

    tarefaCompleta.classList.toggle('done');

}