1
resposta

Resolução comentada.

Difícil de entender como iniciar. Mas depois que entende que deve trocar classes, facilita o raciocinio. Vi outras soluções diferentes aqui e achei legal ter várias formas de se fazer o mesmo.

function alterarStatus(id) {
    // Seleciona o elemento do jogo pelo ID
    let jogo = document.getElementById(`game-${id}`);

    // Seleciona a imagem do jogo
    let imagem = jogo.querySelector('.dashboard__item__img');

    // Seleciona o botão do jogo
    let botao = jogo.querySelector('.dashboard__item__button');

    // Verifica se o jogo está alugado
    let estaAlugado = imagem.classList.contains('dashboard__item__img--rented');

    // Atualiza o estado do jogo
    if (estaAlugado) {
      // Devolver o jogo
      imagem.classList.remove('dashboard__item__img--rented');
      botao.textContent = 'Alugar';
      botao.classList.remove('dashboard__item__button--return'); // Remove a classe do botão "Devolver"
    } else {
      // Alugar o jogo
      imagem.classList.add('dashboard__item__img--rented');
      botao.textContent = 'Devolver';
      botao.classList.add('dashboard__item__button--return'); // Adiciona a classe do botão "Alugar"
    }
  }
1 resposta

Olá, Paulo! Tudo bem?

Isso é ótimo, pois a programação muitas vezes oferece várias maneiras de alcançar o mesmo objetivo, e explorar essas opções pode enriquecer seu aprendizado.

O código que você compartilhou parece ser uma função para alternar o status de um jogo entre "Alugar" e "Devolver". O que você está fazendo é uma ótima prática para entender como a manipulação do DOM funciona em JavaScript.

Tente experimentar com diferentes seletores ou adicionar novas funcionalidades, como exibir uma mensagem de confirmação quando o status do jogo é alterado.

Bons estudos!