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

[Projeto] O meu ficou assim. Mas acredito que de para simplificar.

![](Insira aqui a descrição dessa imagem para ajudar na acessibilidade )

1 resposta
solução!

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));
}

Mudanças Realizadas:

  1. 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 ${}.

  2. 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.

  3. 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.

Benefícios da Simplificação:

  • Redução de Repetição de Código: Ao eliminar blocos if...else redundantes e utilizar operações condicionais mais compactas, o código fica mais fácil de ler e manter.
  • Facilidade na Manutenção: Com menos código repetitivo e uma lógica mais clara, futuras alterações (como mudar os nomes das classes ou o texto dos botões) podem ser feitas em menos pontos, reduzindo o risco de erros.
  • Uso Eficiente de Recursos do JavaScript: Aproveitar recursos da linguagem, como template strings e o segundo parâmetro do método .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.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade