3
respostas

O risco no quer aparecer

Quando eu aperto o botao de concluir, o risco nao aparece. Alguém me ajuda.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./assets/css/style.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=BioRhyme&amp;family=Space+Mono&amp;display=swap">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <title>Ceep</title>
</head>
<body>
  <div class="app">
    <div class="todo-list">
      <h1 class="title">
        Ceep
      </h1>

      <form class="form" action="">
        <input class="form-input" type="text" data-form-input>
        <button class="form-button" data-form-button> Novo Item </button>
      </form>

      <ul class="list" data-list>

      </ul>
    </div>
    <script src="listadetarefas.js"></script>
</body>
</html>
(() => {

    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 = ''; 
};

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')


}
})()
3 respostas

Eu copiei seu código no meu codepen, e criei lá no css .done { text-decoration: line-through; }

E funcionou normalmente, quando eu clicava ele riscava o texto, e quando eu clicava de novo o risco saia. Se o seu css estiver correto como acima, pode ser que o caminho que você esteja passando está errado, lá na tag link.

Em que parte eu tenho que colocar o .done { text-decoration: line-through; } ?

No seu arquivo style.css