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

[Sugestão] Apresentação do projeto AluGames

function alterarStatus(id) {
    // Obtém o elemento do jogo específico pelo ID
    const item = document.getElementById(`game-${id}`);
    
    // Seleciona o botão dentro do item do jogo
    const button = item.querySelector(".dashboard__item__button");
    
    // Seleciona o contêiner da imagem do jogo
    const imgContainer = item.querySelector(".dashboard__item__img");

    // Verifica se o jogo está disponível para aluguel ou já foi alugado
    if (button.textContent === "Alugar") {
        // Altera o texto do botão para "Devolver"
        button.textContent = "Devolver";
        
        // Define a cor do botão para preto
        button.style.backgroundColor = "black";
        button.style.color = "white";
        
        // Adiciona a classe que indica que o jogo está alugado
        imgContainer.classList.add("dashboard__item__img--rented");
    } else {
        // Solicita confirmação antes de devolver o jogo
        const confirmacao = confirm("Tem certeza de que deseja devolver este jogo?");
        if (!confirmacao) {
            return;
        }
        
        // Altera o texto do botão de volta para "Alugar"
        button.textContent = "Alugar";
        
        // Define a cor do botão para um azul mais claro
        button.style.backgroundColor = "#ADD8E6";
        button.style.color = "black";
        
        // Remove a classe que indica que o jogo está alugado
        imgContainer.classList.remove("dashboard__item__img--rented");
    }
}
1 resposta
solução!

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: