Aplicação: ToDo List

[diegobaena89]

Boa tarde, professor! Nos últimos dias, após terminar o módulo 09, me dediquei a fazer a aplicação To Do. Seguem abaixos os pontos que observei sentir mais facilidade ou não:

Facilidades:

• Muita facilidade com html, css e bootstrap, pois já estava bem familiarizado com essas linguagens antes. Também tive bastante facilidade na manipulação do DOM, adicionar e remover classes através do javascript, eventos e funções.

• Também achei bem fácil adicionar novas tasks noo painel de todos através do evento submit.consegui solidificar bem o que havia entendido nas últimas aulas da etapa 06 sobre o event, então não senti dificuldade alguma nisso.

• Eu tentei implementar uma outra solução para deixar o campo em branco após o evento de submit, que era:

event.target.value = ""

eu já havia usado outras vezes, mas a solução do reset() me pareceu mais lógica e a adotei também.

• Capturar os eventos do input no addEventListener do formSearch. Entendi o conceito de comparar o que estava sendo digitado com o que estava contido nas lis, mas tive dificuldade de implementar a lógica nesta parte.

Dificuldades:

• Event delegation para remover itens da li. tive dificuldade para aplicar a lógica do event delegation na remoção da li quando o icone é clicado. Fiz um pouco de confusão com o bubbling. Mas depois de rever a documentação , revi os conceitos e pude entender um pouco melhor.
• Tinha esquecido de colocar no innverHTML da condicional do addEventListener para também incluir a classe 'delete' e meu form não estava funcionando...demorei um pouco pra entendero que estava acontecendo, mas depois consegui resolver. (Isso foi mais falta de atenção do que dificuldade).
• Também tive dificuldade na implementação lógica do filtro de busca. O conceito eu entendi, como eu falei, mas a aplicaçao lógica tive dificuldades...só consegui fazer depois de assisrtir a aula.Entendi muito bem o filter, a s condicionais e tudo o mais, mas na hora de aplicar, travei.

O repositório da minha aplicação está aqui: https://github.com/diegobaena89/todo-app-cjrm-mentoring E o deploy está aqui: https://diegobaena89.github.io/todo-app-cjrm-mentoring/

Muito obrigado e tenha um ótimo fim de semana!

@Roger-Melo

[Roger-Melo]

Olá Diego.

Passando para dizer que visualizei sua issue e se estiver tudo ok com a aplicação, em breve a análise será postada aqui =)

@diegobaena89

[Roger-Melo]

Olá Diego.

Parabéns pelo esforço em implementar a segunda aplicação =)

Comparando com a análise passada, seu progresso é perceptível. Grande parte dos pontos de atenção mencionados foram corrigidos aqui =)

Tenho apenas alguns pequenos pontos de atenção que vou deixar abaixo, sendo eles em relação à organização do código.

Indentação

Observe que no código abaixo, a indentação da invocação do includes dá a entender que ele está no mesmo nível das invocações do filter e do forEach:

  Array.from(ulInputGroup.children)
  .filter(task =>  !task.textContent.toLowerCase()
  .includes(inputSearchValue))
  .forEach(task => {
    task.classList.remove('d-flex')
    task.classList.add('hidden')
  })

Neste caso, para evitar algum mal-entendido sobre as indentações das invocações, eu preferiria indentar as invocações do filter e do forEach e deixar a invocação do includes na mesma linha da expressão no qual ela faz parte:

  Array.from(ulInputGroup.children)
    .filter(task => !task.textContent.toLowerCase().includes(inputSearchValue))
    .forEach(task => {
      task.classList.remove('d-flex')
      task.classList.add('hidden')
    })

É possível também quebrar e indentar as invocações do toLowerCase e do includes (como abaixo), mas eu ainda prefiro da forma acima, pois fica mais claro identificar o callback do filter.

  Array.from(ulInputGroup.children)
    .filter(task => !task.textContent
      .toLowerCase()
      .includes(inputSearchValue))
    .forEach(task => {
      task.classList.remove('d-flex')
      task.classList.add('hidden')
    })

É interessante também indentar template strings que contém marcação HTML:

// antes
ulInputGroup.innerHTML += `
<li class="list-group-item d-flex justify-content-between align-items-center">
<span>${inputValue}</span>
<i class="fas fa-times delete"></i>
</li>
`

// depois
ulInputGroup.innerHTML += `
  <li class="list-group-item d-flex justify-content-between align-items-center">
    <span>${inputValue}</span>
    <i class="fas fa-times delete"></i>
  </li>
`

Agrupamento de linhas de código por tipo

É interessante separar o código por "grupos" de comandos do mesmo tipo.

Se as invocações dos addEventListener forem inseridas nas últimas linhas, fica mais fácil localizar grupos de código do mesmo tipo.

No código abaixo, por exemplo, existem os seguintes "blocos de código":

• Declarações de variáveis
• Declarações de funções
• Listeners de eventos

const formAddTodo = document.querySelector('.form-add-todo')
const ulInputGroup = document.querySelector('.todos-container')
// ...

const insertNewLis = event => {
  // ...
}

const deleteClickedLis = event => {
  // ...
}

const filteringInputValues = event => {
  // ...
}

formSearch.addEventListener('input', filteringInputValues)
formAddTodo.addEventListener('submit', insertNewLis)
ulInputGroup.addEventListener('click', deleteClickedLis)

Linhas em branco

Linhas em branco, quando bem aplicadas indicam, visualmente, a separação entre conceitos.

Seguindo este princípio, eu adicionaria linhas em branco nas linhas:

• 10
• 21
• 32
• 44
• 52

E removeria a linha em branco 11.

---

Novamente, parabéns pela aplicação. Fico feliz em ver seu progresso rumo à fluência =)

As observações acima fizeram sentido?

@diegobaena89

[diegobaena89]

Olá, professor. Boa noite! Tudo bem? espero que sim! Primeiramente, muito obrigado pelas correções, elas fizeram todo o sentido e já refatorei o código! Estou bastante animado com a quantidade de conteúdo que estou conseguindo assimilar e conseguir aplicar nas minhas aplicações graças ao método ATER e também à sua didática.

Muito obrigado mesmo! E vamos rumo à fluência!

Abraços

[Roger-Melo]

Fico muito feliz que o método esteja ajudando em sua jornada rumo à fluência, Diego. No que precisar, pode contar comigo =)