1
resposta

[Projeto] Não sei o fiz no meu código... = )

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;
}
1 resposta

O ideal é termos o código completo para analisarmos de forma correta, já dá pra ver que no CSS vc está usando variáveis que não estão definidas no código. Se possível disponibilize o código pelo GitHub que ficarei feliz em analisar para você.