Aula #22 Template Strings e Componentização

[Morette]

Olá, fiquei com duas dúvidas em relação as aulas 21 e 22.

DÚVIDA 1: Tentei gerar o html colocando a tag article junto ao img, porém não é possível e queria saber o porque.

Ficaria assim:

const $iconCollab = `
   <article class="memory-card -front">
      <img 
         src="img/icon-c.png" 
         alt="Ícone de Livro da Linguagem C++" 
         class="icon" />
   </article>
`;

$root.insertBefore($iconC, null);
$memoryCardFront.insertAdjacentHTML('afterbegin', $iconC);

Desta forma não precisamos criar o JS para criar o elemento article e nem as classes memory-card -front

OBS.: uma coisa que tentei e deu certo durante a aula, foi criar as duas classes em uma só linha

$memoryCardFront.classList.add('memory-card', '-front');

DÚVIDA 2:No desafio da aula 21 eu criei um outro componente para o novo card, pois havia entendido que cada card é um componente diferente. Entendi errado? :sweat:

[Pliavi]

Dúvida 01

Ele não funciona porque a função insertBefore deve receber um objeto Node como primeiro argumento, e o $iconCollab é uma string, por isso a foi criado o article com o createElement.

E se ver $iconC e $memoryCardFront não existem no seu código, principalmente o segundo considerando que você disse ter tirado o createElement pro article.

Se $iconC é o $iconCollab você pode usar apenas o inserAdjacentHTML pra adicionar tudo, ficando o seguinte:

const $iconCollab = `
   <article class="memory-card -front">
      <img 
         src="img/icon-c.png" 
         alt="Ícone de Livro da Linguagem C++" 
         class="icon" />
   </article>
`;

$root.insertAdjacentHTML('afterBegin', $iconCollab);

o insertAdjacentHTML deve receber uma string que será convertida em nós (Nodes) do HTML, a partir daí o código passará a funcionar

A segunda dúvida não tenho muito como ajudar porque não cheguei nessa aula ainda :v

[Morette]

Putz, nem me liguei que o nome da variável estava diferente ($iconCollab != $icon). Estudar depois das 22h está tenso :sob:

const $iconCollab = `
   <article class="memory-card -front">
      <img 
         src="img/icon-c.png" 
         alt="Ícone de Livro da Linguagem C++" 
         class="icon" />
   </article>
`;

$root.insertBefore($iconC, null);
$memoryCardFront.insertAdjacentHTML('afterbegin', $iconC);

Ele não funciona porque a função insertBefore deve receber um objeto Node como primeiro argumento, e o $iconCollab é uma string, por isso a foi criado o article com o createElement.

Já li algumas vezes isso de objeto Node, nó etc, porém não sei o conceito. Dei uma pesquisada no google, mas não achei muita coisa.

Você poderia indicar onde encontro algum material de estudo sobre isso?

[Pliavi]

Pior que de material que eu conheça não tenho, mas se pá esses devem abordar o assunto:

• https://tableless.com.br/entendendo-o-dom-document-object-model/
• https://www.devmedia.com.br/trabalhando-com-dom-em-javascript/29039

É que sobre os nós e seus atributos especificamente acho que nunca vi um artigo sobre.

E tem a documentação da MDN https://developer.mozilla.org/en-US/docs/Web/API/Node