1
resposta

[Sugestão] Faltou enviar por parâmetro a listaDeCompras na função

Faltou enviar por parâmetro a listaDeCompras na função, para que no arquivo criarItemDaLista.js, possa fazer a verificação do checkboxInput, mais especificamente no else.

adicionarItem.js

import { criarItemDaLista } from "./criarItemDaLista.js";

const item = document.getElementById("input-item");
const listaDeCompras = document.getElementById("lista-de-compras", listaDeCompras);

export function adicionarItem(evento) {
        evento.preventDefault()

        const itemDaLista = criarItemDaLista(item.value, listaDeCompras); //envia como parâmetro a lista de compras
        listaDeCompras.appendChild(itemDaLista);
}

criarItemDaLista.js

export function criarItemDaLista(item, listaDeCompras) { //recebe por parâmetro a lista de compras
        
        //código omitido

        checkboxLabel.addEventListener("click", function (evento) {
                const checkboxInput = evento.currentTarget.querySelector(".input-checkbox");
                const checkboxCustomizado = evento.currentTarget.querySelector(".checkbox-customizado");
                const itemTitulo = evento.currentTarget.closest("li").querySelector("#item-titulo")
                if (checkboxInput.checked) {
                        checkboxCustomizado.classList.add("checked");
                        itemTitulo.style.textDecoration = "line-through";
                        listaComprados.appendChild(itemDaLista)
                } else {
                        checkboxCustomizado.classList.remove("checked");
                        itemTitulo.style.textDecoration = "none";
                        listaDeCompras.appendChild(itemDaLista) //utiliza o parâmetro recebido para realizar a ação
                }

                verificarListaComprados(listaComprados)
        })
        
        //código omitido
        
}
1 resposta

Olá, Marcone. Como vai você?

Muito bem observado, realmente nesse momento do curso faltou um modo de acessar a variável listaDeCompras dentro do arquivo criarItemDaLista.js. Isso acaba causando um comportamento inesperado na interação do usuário com a página, que nesse caso, ao desmarca o item ele não retorna para a lista de compras.

Mais à frente no curso, durante os testes, a instrutora também percebe essa questão e faz a correção necessária.

Parabéns por ter notado esse detalhe! Isso mostra que você está prestando muita atenção ao código e compreendendo a lógica por trás dele. Continue assim, pois essa atitude é fundamental para o seu crescimento como desenvolvedor!

Continue firme nos seus estudos!

Abraços!