)
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Sua função alterarStatus já está fazendo o trabalho de maneira eficaz, alterando o texto e o estilo do botão, além de ajustar a classe das imagens associadas com o jogo. Porém, é possível simplificar essa função eliminando a repetição de código e tornando-a mais concisa. Aqui está uma versão simplificada:
function alterarStatus(gameId) {
const botao = document.getElementById(`game-${gameId}`).querySelector('.dashboard__item__button');
const imagensJogos = document.querySelectorAll(`#game-${gameId} .dashboard__item__img`);
const estaAlugado = botao.innerHTML === 'Devolver';
botao.innerHTML = estaAlugado ? 'Alugar' : 'Devolver';
botao.classList.toggle("dashboard__item__button--return", !estaAlugado);
imagensJogos.forEach(imagem => imagem.classList.toggle("dashboard__item__img--rented", !estaAlugado));
}
Uso de Template Strings: Primeiro, corrigi o uso de template strings para a interpolação de gameId. As template strings no JavaScript são delimitadas por crases (` `) ao invés de aspas, permitindo a inserção de variáveis e expressões dentro de strings usando ${}.
Operador Ternário: Utilizei o operador ternário para alternar o texto do botão. Isso reduz a necessidade de um bloco if...else explícito, tornando o código mais limpo.
Método .toggle com Segundo Parâmetro: Para alternar as classes, usei o método .toggle no classList dos elementos, que permite não apenas adicionar ou remover uma classe, mas também controlar essa adição/remoção através de um segundo parâmetro booleano. Esse parâmetro é verdadeiro para adicionar a classe (ou manter se já estiver adicionada) e falso para remover (ou manter removida). Isso elimina a necessidade de dois blocos separados if e else if para adicionar e remover as classes.
if...else redundantes e utilizar operações condicionais mais compactas, o código fica mais fácil de ler e manter..toggle, permite escrever código mais idiomático e eficiente.Esta versão simplificada mantém a mesma funcionalidade, mas de uma forma que aproveita melhor as capacidades do JavaScript para tornar o código mais limpo e fácil de entender.
