Olá, tudo bão? Estou fazendo um projeto do curso Js. "Lista de compras", o problema é que não sei qual alterção que fiz que os butões de edição e exclução sumiram... Já verifiquei o HTML, CSS o script e nada de fazer esses botões aparecerem. Alguém me dá um Help? X >
RESUMI ALGUMAS PARTES DO CÓDIGO...
** Código HTML **
<main>
<img src="img/paper bag with groceries 1.svg" alt="Sacola de compras">
<form action="">
<input class="input-item" id="input-item" type="text" placeholder="Digite o que deseja adicionar">
<button class="adicionar-botao" id="adicionar-item" type="submit">Salvar item</button>
</form>
<h2>Lista de compras</h2>
<hr/>
<ul id="lista_de_compras">
<p id="mensagem-lista-vazia" style="display: block;">Sua lista está vazia. Adicione itens a ela para não esquecer nada na próxima compra!</p>
</ul>
<h2>Comprado</h2>
<hr/>
<ul id="itens-comprados"></ul>
</main>
<script src="script.js" type="module"></script>
** Código Css **
.checkbox-input {
display: none;
}
.checkbox-container {
display: flex;
align-items: center;
}
.checkbox-customizado {
width: 20px;
height: 20px;
background-color: var(--neutro);
border: 1px solid var(--preto);
cursor: pointer;
border-radius: 4px;
margin-right: 8px;
}
.checked {
background-color: var(--preto);
position: relative;
}
.checked::after {
content: "";
position: absolute;
left: 30%;
top: 0;
width: 5px;
height: 14px;
border-top: 2px solid var(--neutro);
border-left: 2px solid var(--neutro);
transform: rotate(-140deg);
}
.item-lista-button{
background-color: transparent;
border: none;
margin-right: 0.9em;
display: flex;
align-items: center;
justify-content: center;
padding: 5px;
}
.item-lista-button {
width: 20px;
height: 20px;
}
** Código js. **
const itensComprados = document.getElementById("itens-comprados");
const listaDeCompras = document.getElementById("lista_de_compras");
let contador = 0;
export function criarItemDaLista(item){
// Adicione no lugar onde você cria o evento de click do checkbox
checkBoxLabel.addEventListener("click", function(evento) {
const checkBoxInput = evento.currentTarget.querySelector(".checkbox-input");
const checkboxCustomizado = evento.currentTarget.querySelector(".checkbox-customizado");
const itemDaLista = evento.currentTarget.closest("li");
const itemTitulo = itemDaLista.querySelector("#item-titulo");
if (checkBoxInput.checked) {
// Item foi marcado como comprado
checkboxCustomizado.classList.add("checked");
itemTitulo.style.textDecoration = "line-through"; // Riscar o nome do item
itensComprados.appendChild(itemDaLista); // Mover o item para a lista de itens comprados
} else {
// Item foi desmarcado, voltar para lista de compras
checkboxCustomizado.classList.remove("checked");
itemTitulo.style.textDecoration = "none"; // Remover o riscado do texto
listaDeCompras.appendChild(itemDaLista); // Mover de volta para a lista de compras
}
});
// botoẽs
const containerButoes = document.createElement("div");
const butaoRemover = document.createElement("button");
const butaoEditar = document.createElement("button");
butaoRemover.classList.add("botao-acao");
butaoEditar.classList.add("botao-acao");
// botão remoção
const imagenRemover = document.createElement("img");
imagenRemover.src = "img/Excluir.svg";
imagenRemover.alt = "Remover";
// botão edição
const imagemEditar = document.createElement("img");
imagemEditar.src = "img/Edição.svg";
imagemEditar.alt = "Editar";
butaoRemover.appendChild(imagenRemover);
containerButoes.appendChild(butaoRemover);
butaoEditar.appendChild(imagemEditar);
containerButoes.appendChild(butaoEditar);
containerListaItens.appendChild(containerNomeDoItem);
containerListaItens.appendChild(containerButoes);
const itemData = document.createElement("p");
itemData.innerText = `${new Date().toLocaleDateString("pt-BR", { weekday: "long" })} (${new Date().toLocaleDateString()}) às ${new Date().toLocaleTimeString("pt-BR", { hour: "numeric", minute: "numeric" })}`;
itemData.classList.add("texto-data");
itemDaLista.appendChild(containerNomeDoItem);
itemDaLista.appendChild(itemData);
return itemDaLista;
}