Verificar o tamanho da lista de itens comprados

Como eu não encontrei uma solução para o segundo desafio eu vou postar aqui a minha, espero que ajude alguém.

Nesse caso eu fiz algumas alterações diferentes do que eu encontrei no repositório do GitHub, no repositório a solução foi criar um arquivo JS novo com uma função própria para verificar o tamanho da lista dos itens já comprados, eu entendi isso como repetição de código porque é uma segunda função que faz essencialmente a mesma coisa da primeira.

A minha solução foi a seguinte então.

Primeiro eu alterei no HTML o elemento com o título da lista dos itens já comprados adicionando um ID e um style.

<h2 id="titulo-lista-comprados" style="display: none">Comprados</h2>

Depois eu fui no nosso arquivo JS que tem a função para verificar o tamanho das listas e referenciei a duas listas diretamente e removi o argumento do construtor da função, depois eu apliquei a mesma lógica para as duas listas.

const mensagemListaVazia = document.getElementById("mensagem-lista-vazia");
const tituloListaComprados = document.getElementById("titulo-lista-comprados");

const listaDeCompras = document.getElementById("lista-de-compras");
const listaComprados = document.getElementById("lista-comprados");

export function verificaListaVazia() {
    mensagemListaVazia.style.display = "none";
    tituloListaComprados.style.display = "block";
    if (listaDeCompras.childElementCount === 0) {
        mensagemListaVazia.style.display = "block";
    }
    if (listaComprados.childElementCount === 0) {
        tituloListaComprados.style.display = "none";
    }
}

Dessa forma a função pode ser chamada em outros pontos e isso será importante.

Agora a função verificaLista() será chamada em dois momentos, um dentro da função adicionaItem() normalmente

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

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

export function adicionarItem(evento) {
    evento.preventDefault();
    if (item.value) {
        const itemDaLista = criarItemDaLista(item);
        listaDeCompras.appendChild(itemDaLista);
        verificaListaVazia();
    }
    item.value = "";
}

E também lá no nosso arquivo da função criaItemDaLista(), quando nós fazemos a checagem para saber se o checkbox foi clicado ou não, o método verificaLista() será chamado também, não se esqueça de importar o arquivo aqui.

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

...

    checkboxLabel.addEventListener("click", function (evento) {
        const checkboxInput = evento.currentTarget.querySelector(".checkbox-input");
        const checkboxCustomizado = evento.currentTarget.querySelector(".checkbox-customizado");
        const itemTitulo = evento.currentTarget.closest("li").querySelector("#item-titulo");

        checkboxCustomizado.classList.remove("checked");
        itemTitulo.style.textDecoration = "none";
        listaDeCompras.appendChild(itemDaLista);
        if (checkboxInput.checked) {
            checkboxCustomizado.classList.add("checked");
            itemTitulo.style.textDecoration = "line-through";
            listaComprados.appendChild(itemDaLista);
            verificaListaVazia();
        }
    })

...

Se o método não for chamado nesse momento a verificação da lista só será feita quando adicionarmos itens novos e não quando clicarmos no checkbox dos itens já comprados.

Lembrando que essa solução foi feita conforme o meu avanço no curso então não há garantias de que ela irá gerar algum conflito com as próximas aulas. Caso alguém tenha alguma correção para algo eu ficaria feliz em saber.