//Váriaveis globais;
//Associa o elemento do input a variável criada;
let inputcaixa = document.getElementById("input-item");
//Não entendi muito bem a necessidade declarar essa variável do botão, pois podemos chama-lô somente com o ID também;
//Acredito que seja relacionada a forma como a instrutora chamou o botão, estava acostumado a chama=lô sempre com:
//document.getElementById("IDDOBOTÃO").addEventListener e por ai vai, achei interessante essa outra forma de chama-lô;
const botaoadicionar = document.getElementById("adicionar-item");
//Contador para cada vez que for criado um novo item na lista ele altere o "número" da id da checkbox;
let contador = 0;
botaoadicionar.addEventListener("click", (evento) => {
evento.preventDefault();
// No começo eu não entendia muito bem esse objeto do evento, sempre o ignorei sem perceber.
// Nesse caso, definimos o argumento para ter acesso ao objeto do evento e evitar a perda de dados ao recarregar a página.
let inputItem = inputcaixa.value; //Pega o valor do input e atribui a variável criada inputitem;
//É importante esse comando dentro do botão de evento, justamente pra captura ser feita após o clique do botão;
if (inputItem === ""){
alert("Campo vázio, preencha corretamente!");
return
//Verifica se o input está vázio, caso esteja emite um alert e através do return ele sai da função;
}
const listadeitem = document.createElement("li"); //cria o li;
const div = document.createElement("div"); //cria a div;
div.classList.add("lista-item-container"); //adiciona uma classe a div;
const input = document.createElement("input"); //cria o input;
input.type = "checkbox"; //atribui um tipo ao input, no caso checkbox;
input.id = "checkbox-" + contador++; //adiciona uma id ao checkbox e concatena com o valor do contador+1;
const texto = document.createElement("p"); //cria um paragráfo;
texto.innerText = inputItem; //o valor do texto desse paragráfo vai receber o valor do inputItem;
const listadecompras = document.getElementById("lista-de-compras"); //Cria uma variável para manipular/add lá na frente elementos a ul;
div.appendChild(input);
div.appendChild(texto);
listadeitem.appendChild(div);
listadecompras.appendChild(listadeitem);
});
Não tenho certeza se é válido compartilhar meus códigos comentados aqui, pois pelo que vi, o fórum parece ser mais voltado para a resolução de dúvidas. No entanto, vi um comentário de resposta a um código que não era uma dúvida, e ele incentivava a pessoa a continuar compartilhando seus códigos. Como tenho o hábito de comentar tudo o que codo para revisar depois, pensei que poderia ajudar alguém que esteja na mesma fase e tenha dúvidas semelhantes. Se não for apropriado, por favor, me avisem para que eu não poste.
