Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Abordagem diferente

Utilizei uma abordagem um pouco diferente. Criei uma função no ui.js que cria a div com o texto e a img:

listaVazia() {
        const listaContainer = document.getElementById(
            "lista-pensamentos-container"
        );

        const texto = document.createElement("p");
        texto.id = "texto-vazio";
        texto.textContent =
            "Nada por aqui ainda, que tal compartilhar alguma ideia?";

        const imagem = document.createElement("img");
        imagem.id = "imagem-vazio";
        imagem.src = "assets/imagens/lista-vazia.png";
        imagem.alt = "Ícone caixa vazia";

        const vazio = document.createElement("div");
        vazio.classList.add("vazio-div");
        vazio.appendChild(texto);
        vazio.appendChild(imagem);

        listaContainer.appendChild(vazio);
    },

Estilizei no css:

#lista-pensamentos-container .vazio-div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#texto-vazio {
  margin-bottom: 16px;
  color: var(--Azul-Dark, #041832);
  font-family: "Poppins", sans-serif;
  font-size: 22px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

#imagem-vazio {
  width: 100px;
}

e fiz a verificação na renderizarPensamentos() para chamar a listaVazia():

async renderizarPensamentos() {
        const listaPensamentos = document.getElementById("lista-pensamentos");
        listaPensamentos.innerHTML = "";

        try {
            const pensamentos = await api.buscarPensamentos();
            pensamentos.forEach(ui.adicionarPensamento);
            if (pensamentos.length === 0) {
                this.listaVazia();
            }
        } catch (error) {
            alert("Erro: ", error);
        }
    },
1 resposta
solução!

Olá, Gabriel, como vai?

Sua abordagem está excelente! Você usou a criação dinâmica de elementos diretamente no JavaScript, o que é uma prática interessante e muito útil para tornar o código mais dinâmico. Sua lógica na função listaVazia está bem estruturada, e os estilos no CSS completam perfeitamente a funcionalidade.

Parabéns pela solução criativa e funcional! Continue compartilhando suas ideias e abordagens, é muito inspirador para a comunidade.

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)