[Reclamação] Acho que faltou um pouco de explicação em cada passo, criação de elementos

Oi, Lucas! Espero que esteja bem.

Agradecemos imensamente por compartilhar seu feedback conosco. Sua contribuição é crucial para aprimorarmos nossos.

Gostaria de reforçar que, ao término de cada curso, disponibilizamos uma avaliação individual para que cada estudante possa atribuir uma nota e expressar sua opinião sobre o curso e pessoa instrutora.

É fundamental que você compartilhe sua opinião sincera, pois isso nos auxilia na identificação das áreas que precisamos aprimorar. Essas avaliações são essenciais para a definição de nossas métricas, e seu feedback chega diretamente nas pessoas instrutoras envolvidas no curso.

Agora vamos focar na criação de um item de lista (li) com uma div dentro, seguindo o que foi apresentado na aula.

1. Capturando o evento de clique no botão: Primeiro, precisamos capturar o evento de clique no botão de adicionar item. Pra isso, usamos um addEventListener.

   const botaoSalvarItem = document.getElementById("adicionar-item");
   botaoSalvarItem.addEventListener("click", adicionarItem);
   

2. Função adicionarItem: Dentro dessa função, vamos criar os elementos necessários.

   function adicionarItem(evento) {
       evento.preventDefault(); // Previne o comportamento padrão do formulário
   
       // Criação do elemento 'li'
       const itemDaLista = document.createElement("li");
   
       // Criação do container 'div'
       const containerItemLista = document.createElement("div");
       containerItemLista.classList.add("lista-item-container");
   
       // Criação do container para o nome do item
       const containerNomeDoItem = document.createElement("div");
   
       // Criação do parágrafo para o nome do item
       const nomeDoItem = document.createElement("p");
       nomeDoItem.innerText = document.getElementById("input-item").value; // Pegando o valor do input
       containerNomeDoItem.appendChild(nomeDoItem);
   
       // Adicionando o containerNomeDoItem dentro do containerItemLista
       containerItemLista.appendChild(containerNomeDoItem);
   
       // Adicionando o containerItemLista dentro do itemDaLista
       itemDaLista.appendChild(containerItemLista);
   
       // Adicionando o itemDaLista na lista de compras
       const listaDeCompras = document.getElementById("lista-de-compras");
       listaDeCompras.appendChild(itemDaLista);
   }
   

Resumindo:

• Criamos um elemento li para representar o item da lista.
• Criamos uma div que será o container do item.
• Adicionamos uma classe à div para estilização.
• Criamos um parágrafo (p) para exibir o nome do item.
• Pegamos o valor do input e definimos como texto do parágrafo.
• Adicionamos o parágrafo dentro da div.
• Adicionamos a div dentro do li.
• Adicionamos o li na lista (ul).

Obrigada mais uma vez pela sua contribuição. Conte com a Alura!

Um abraço e bons estudos.