1
resposta

[Projeto] Minha resolução do projeto AluraGames

A minha resolução do projeto é um pouco diferente da que foi feita pelos professores.

Eu usei toggle para alternar as classes e fiz as funcionalidades de mudar a imagem e o botão dentro de outras funções

function alterarStatus(id) { 
    let jogoClicado = document.getElementById(`game-${id}`);
    let imagemJogo = jogoClicado.querySelector('.dashboard__item__img');
    let botaoJogo = jogoClicado.querySelector('.dashboard__item__button');
    
    mudarImagem(imagemJogo);
    mudarBotao(botaoJogo);
}

function mudarImagem(imagemJogo) {
    imagemJogo.classList.toggle('dashboard__item__img--rented');
}

function mudarBotao(botaoJogo) {
    botaoJogo.classList.toggle('dashboard__item__button--return');
    
    if (botaoJogo.textContent === 'Alugar') {
        botaoJogo.textContent = 'Devolver';
    } else {
        botaoJogo.textContent = 'Alugar';
    };
}
1 resposta

Oi Edilson,

Parabéns pela iniciativa de explorar soluções diferentes para o projeto! 👏

Sua abordagem com toggle para alternar as classes é muito interessante e deixa o código mais conciso.

A separação das funcionalidades em mudarImagem e mudarBotao também contribui para um código mais organizado e fácil de entender. 💪

Para saber mais: Documentação do classList.toggle() - Explore a documentação oficial do método classList.toggle() para entender melhor seu funcionamento e possibilidades.

A prática leva à perfeição!