No arquivo ui.js, dentro da função renderizarPensamentos(), no try/catch, adicionei um if-else. Trecho do código:
try {
const pensamentos = await api.buscarPensamentos();
if (pensamentos.length == 0) {
// criação de uma constante "mensagem", caso não haja nenhum pensamento cadastrado no projeto
const mensagem_vazia = document.createElement("p");
mensagem_vazia.textContent =
"Nada por aqui ainda, que tal compartilhar alguma ideia?";
lista_pensamentos.appendChild(mensagem_vazia);
mensagem_vazia.classList.add("lista-vazia-mensagem");
// criação da imagem de uma gaveta vazia - quando não há pensamentos
const imagem_sem_pensamentos = document.createElement("img");
imagem_sem_pensamentos.src = "img/lista-vazia.png";
imagem_sem_pensamentos.alt = "Gaveta vazia";
lista_pensamentos.appendChild(imagem_sem_pensamentos);
imagem_sem_pensamentos.classList.add("lista-vazia-imagem");
} else {
pensamentos.forEach(user_interface.adicionarPensamentoNaLista);
}
} catch (error) {
alert("Erro ao renderizar pensamentos.");
}
},
Após a implementação, como o texto e a imagem não estavam centralizados, acrescentei suas respectivas classes no style.css:
.lista-vazia-mensagem,
.lista-vazia-imagem {
display: block;
text-align: center;
width: 100%;
}
.lista-vazia-imagem {
max-width: 120px;
margin: 0 auto;
}
Link para o projeto no GitHub: https://github.com/diegofc2002/projeto-memoteca.
