Aplicação: Todo - Githubissues

crjstjanojose commented 3 years ago

As cores da sua versão da aplicação são diferentes das cores da aplicação mostrada na aula?

Sim

A aplicação contém funcionalidades que não foram mostradas nas aulas?

Não

A aplicação contém features da linguagem que não foram mostradas nas aulas?

Não

Link do repositório da aplicação

https://github.com/crjstjanojose/todolistcjrmtailwindcss.git

Maiores dificuldades durante a implementação

Nesta aplicação não tive grandes dificuldades já havia implementado em exercício anterior usando a marcação HTML disponibilizada. O que fiz foi refazer ela usando uma outra lib de CSS (Tailwind), mas mantendo a mesma funcionalidade.

Observo que não me ative muito a manter o padrão mostrado do refatoramento, minha intenção foi mais de praticar.

Link com a aplicação on-line - https://todolistcjrmtailwindcss.netlify.app

Menores dificuldades durante a implementação

Selecionar os elementos Montar o layout

Roger-Melo commented 3 years ago

Olá @crjstjanojose!

Parabéns pelo esforço em re-construir a aplicação =)

Minhas observações são as seguintes...

A remoção de um to-do só funciona se o clique acontecer em certas partes do svg. Você pode testar isso ao clicar em locais diferentes do svg.

Isso acontece por que o SVG é um objeto do DOM que contém itens aninhados. Quando o clique acontece na tag <svg>, event.target resultará na tag svg ou na tag path (que está dentro da <svg>).

Para resolver isso, você pode usar o método closest(). Olha só...

<article class="my-article">
  <div class="div3">
    <div class="div2">
      <div class="div1"></div>
    </div>
  </div>
</article>

.div1 {
  background-color: red;
  width: 50px;
  height: 50px;
}

.div2 {
  background-color: blue;
  width: 100px;
  height: 100px;
}

.div3 {
  background-color: green;
  width: 150px;
  height: 150px;
}

.my-article {
  background-color: black;
  width: 200px;
  height: 200px;
}

const div3 = document.querySelector('.div3')

div3.addEventListener('click', e => {
  console.log(e.target)
})

No código acima, quando o clique acontece na div3 (ou em qualquer div dentro dela), event.target resulta na div que foi clicada, certo?

Agora, imagine que quando o clique acontecer, ao invés de exibir a div que foi clicada, eu quero exibir o <article> ancestral mais próximo dessa div no qual o clique aconteceu. Pra isso, eu posso usar o método closest():

div3.addEventListener('click', e => {
  console.log(e.target.closest('.my-article'))
})

No código acima, quando o clique em alguma das 3 divs acontece, a referência do <article> é exibida no console.

O closest é um método que recebe um seletor CSS como argumento e retorna a referência do ancestral mais próximo no qual o seletor CSS dá match. Se o seletor CSS dá match com o elemento no qual ele foi encadeado, o próprio elemento é retornado. E se o seletor CSS não dá match, ele retorna null.

Sabendo disso, é possível mudar um pouco a lógica da deleteTodo, olha só:

const deleteTodo = (event) => {
  const clickedElement = event.target;

  if (!clickedElement.closest('.delete')) {
    return
  }

  clickedElement.closest('li').remove()
};

Se o elemento clicado ou algum ancestral dele não tem uma class delete, isso significa que o clique não aconteceu no svg, então nenhuma ação acontece.

Porém, se o if não foi executado, isso significa que o clickedElement armazena a referência do svg (mesmo que o clique tenha acontecido no <path>), então o <li> ancestral do <svg> é removido.

Nas próximas aulas você verá uma forma de remover os to-dos sem navegar pelo DOM dessa forma, pois isso pode ser perigoso se você mudar a sua marcação. Mas até lá, essa é uma possível solução para que o clique no SVG realmente remova o to-do =)

As observações fizeram sentido?

crjstjanojose commented 3 years ago

Boa noite;

Sim observação como sempre esclarecedoras e pertinentes.

Feita alteração como dito e funcionando belezinha agora.