Olá segue minha resolução do desafio do mural vazio.
CSS:
.mural-vazio {
display: none;
text-align: center;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 15px;
color: var(--Azul-Dark, #041832);
}
.mural-vazio p {
font-family: "Poppins", sans-serif;
font-size: 22px;
font-weight: 400;
line-height: 33px;
}
.mural-vazio img {
max-width: 200px;
margin-bottom: 20px;
}
.mural-vazio.visivel{
display: flex;
HTML:
<h3>Meu Mural</h3>
<div id="mural-vazio" class="mural-vazio">
<p>Nada por aqui ainda, que tal compartilhar alguma ideia?</p>
<img src="assets/imagens/lista-vazia.png" alt="Mural vazio" />
</div>
JS -ui
async renderizarPensamentos() {
const listaPensamentos = document.querySelector("#lista-pensamentos");
const muralVazio = document.querySelector("#mural-vazio");
listaPensamentos.innerHTML = "";
try {
const pensamentos = await api.buscarPensamentos();
if (pensamentos.length === 0) {
muralVazio.classList.add("visivel");
} else {
muralVazio.classList.remove("visivel");
pensamentos.forEach((pensamento) => {
ui.adicionarPensamentos(pensamento);
});
}
// pensamentos.forEach((pensamento) => {
// listaPensamentos.innerHTML += ` <li class="li-pensamento" data-id="${pensamento.id}">
// <img src="assets/imagens/aspas-azuis.png" alt="Aspas azuis" class="icone-aspas">
// <div class="pensamento-conteudo">${pensamento.conteudo}</div>
// <div class="pensamento-autoria">${pensamento.autoria}</div>
// </li>`;
} catch {
alert("Erro ao renderizar pensamentos");
}
},
