Script da aula - com todas sintaxe comentadas | JavaScript na Web: manipule o DOM com JavaScript

Olá, Com a dificuldade que venho tendo na adaptação a esse conteúdo de interação do DOM, resolvi comentar cada linha de script desta aula, de forma que facilitasse minha assimilação do assunto. Gentileza, me retornem um feedback geral, sobre minha linha de raciocínio descrita em cada comentário desta atividade. Obs.: Não realizei nenhuma correção ortográfica nos comentários é apenas um 'rascunho'.

const criarTarefa = (evento) => {
    /* Criamos uma função com várias ações necessárias para leitura e inserção de valor no formulario HTML.  */

    evento.preventDefault()
    /* Criamos uma metodo no JS com ligação a um elemento do HTML, para mudar o comportamento do formulario. */
    const lista = document.querySelector('[data-list]')
    /* Criamos uma constante no JS com ligação a um elemento do HTML, neste caso o 'ul' onde são armazenados 
    os 'li' da lista, tag responsavel por armazenar as informações da lista */

    const input = document.querySelector('[data-form-input]')
   /* Criamos uma constante no JS com ligação a um elemento do HTML, neste caso, o 'input', local onde os usuarios inserem a informação. */

    const valor = input.value
    /* Criamos uma constante no JS para capturar as informações da constante  'input' 
    usando o metodo 'value'  */

    const tarefa = document.createElement('li')
     /* Criamos uma constante no JS com ligação a um elemento do HTML, para criar uma TAG 'li' no html. */

    tarefa.classList.add('task')
    /* Utilizamos o metodo 'classList' no JS para buscar uma 'class' salva no html e 'add'(adicionar) 
    ao conteudo da constante 'tarefa'. */

    const conteudo = `<p class = 'content'> ${valor} </p>`
    /* Criamos uma constante no JS com ligação a um elemento do HTML, para inserir um <p> no html 
    adicionando as informações capturadas na constante 'valor' */

    tarefa.innerHTML = conteudo
    /* Usamos o metodo 'innerHTML para inserimos no HTML as informações da constante 'tarefa' (criar uma '<li>')
    e adicionarmos neste 'li, as informações da constante 'conteudo'(cria um <p> com dados capturados)  */

    lista.appendChild(tarefa)
    /* Metodo de inserção das informações, contidas na constante 'conteudo', na estrutura 'filha (<li>)' utilizando a referencia
    da estrutura 'pai <ul> (data-lista)' da tabela) */

    input.value = ''
    /* Utilizamos o metodo 'value' recebendo um valor vazio('') apos o processo, para deixar em branco
     o 'input'  */

}

const novaTarefa = document.querySelector('[data-form-button]')
 /* Criamos uma constante no JS com ligação a um elemento do HTML, neste caso o botão(Novo Item) do formulário. */

novaTarefa.addEventListener('click',criarTarefa)
 /* O ADDEVENTLISTERNER busca no HTML  a ação desejada, no exemplo acima essa ação é o 'click'. 
 Nos parenteses desse item colocamos a seguinte ordem:
  1º a ação que iremos buscar no local indicada, neste exemplo buscamos o click na constante  'novaTarefa'.
    ) */

HTML

<!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="style3.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="listaDeTarefa.js"></script>


</body>
</html>