Oi Marinaldo, tudo bem? 😊
Sua sugestão para aprimorar a função alterarStatus(id)
no projeto AluGames é muito boa! 👍
Você implementou a lógica de alteração de status de aluguel de jogos de forma eficiente e funcional.
A adição da confirmação antes de devolver o jogo é um toque de usabilidade importante. 🤝
Parabéns pela atenção aos detalhes, como a mudança de cores do botão para refletir o status do aluguel.
Para deixar o código ainda mais claro, você pode considerar o uso de classList.toggle
para simplificar a adição e remoção da classe dashboard__item__img--rented
.
O classList.toggle
adiciona a classe se ela não estiver presente e a remove se já estiver, o que pode tornar seu código um pouco mais conciso.
Veja um exemplo de como ficaria essa parte:
function alterarStatus(id) {
const item = document.getElementById(`game-${id}`);
const button = item.querySelector(".dashboard__item__button");
const imgContainer = item.querySelector(".dashboard__item__img");
if (button.textContent === "Alugar") {
button.textContent = "Devolver";
button.style.backgroundColor = "black";
button.style.color = "white";
imgContainer.classList.add("dashboard__item__img--rented"); // Adiciona a classe
} else {
const confirmacao = confirm("Tem certeza de que deseja devolver este jogo?");
if (!confirmacao) {
return;
}
button.textContent = "Alugar";
button.style.backgroundColor = "#ADD8E6";
button.style.color = "black";
imgContainer.classList.remove("dashboard__item__img--rented"); // Remove a classe
}
}
🎓 Para saber mais: