[Sugestão] FUNÇÕES NÃO MOSTRADA ANTERIORES

Oi Caio! Tudo bem?

Realmente, às vezes, novos métodos e conceitos são introduzidos nos desafios sem uma explicação prévia detalhada, o que pode dificultar o entendimento.

No caso específico do exercício "Alterando status do jogo clicado", parece que você está lidando com manipulação de DOM e classes CSS usando JavaScript. Vou tentar esclarecer alguns dos métodos e conceitos que podem não ter sido explicados anteriormente:

1. querySelector: Esse método retorna o primeiro elemento dentro do documento que corresponde ao seletor especificado. Por exemplo, gameClicado.querySelector('.dashboard__item__img') seleciona o primeiro elemento com a classe .dashboard__item__img dentro de gameClicado.

2. classList: É uma propriedade que retorna uma coleção DOMTokenList ativa das classes do elemento. Você pode usar métodos como add(), remove(), e contains() para manipular essas classes. Por exemplo:

   • imagem.classList.add('classe-nova') adiciona a classe classe-nova ao elemento imagem.
   • imagem.classList.remove('classe-antiga') remove a classe classe-antiga do elemento imagem.
   • imagem.classList.contains('classe-verificar') verifica se a classe classe-verificar está presente no elemento imagem.

3. textContent: Essa propriedade define ou retorna o conteúdo textual de um nó. No exemplo, botao.textContent = 'Alugar' altera o texto do botão para "Alugar".

Aqui está um exemplo prático de como esses métodos são usados no contexto do seu exercício:

function alterarStatus(id) {
    let gameClicado = document.getElementById(`game-${id}`);
    let imagem = gameClicado.querySelector('.dashboard__item__img');
    let botao = gameClicado.querySelector('.dashboard__item__button');

    if (imagem.classList.contains('dashboard__item__img--rented')) {
        imagem.classList.remove('dashboard__item__img--rented');
        botao.classList.remove('dashboard__item__button--return');
        botao.textContent = 'Alugar';
    } else {
        imagem.classList.add('dashboard__item__img--rented');
        botao.classList.add('dashboard__item__button--return');
        botao.textContent = 'Devolver';
    }
}

Espero que isso ajude a esclarecer um pouco mais sobre os métodos utilizados.

Bons estudos!