Eu nao sei o que acontece, porque eu tentei até colocar o event.preventDefault no js mas nao deu certo. E antes eu estava com o erro sempre na linha 3, aí me disseram pra substituir data-form-button por .form-button e data-form-input por .form-input e deu certo. Entao eu queria saber duas coisas: 1) como corrigir meu código para aparecer no console a frase "comprar um morango" após digitada no formulário ; 2) porque o .form-button funciona (estou usando o microsoft edge, não sei se muda alguma coisa)

Meus codigos: INDEX.HTML:

Ceep

  <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">
  <li class="task">
    <p class="content">
      comprar um abacate
    </p>
  </li>
  </ul>
</div>
<script src="listaDeTarefas.js"></script>

LISTADETAREFAS.JS: 

const novaTarefa = document.querySelector('.form-button')

novaTarefa.addEventListener('click', (event)=>{ const input = document.querySelector('.form-input') event.preventDefault(); const valor = input.value console.log( valor ) })

const novaTarefa = document.querySelector('[data-form-button]') novaTarefa.addEventListener('click', (event) => { event.preventDefault(); const input = document.querySelector('[data-form-input]'); const valor = input.value; console.log(valor) })