1
resposta

[Projeto] Alugames- alert e contador

Ficou um pouco diferente dos projetos que olhei no Fórum, mas esta rodando direitinho. Se quiserem dar sugestões.

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';
        let confirmarDevolução = confirm('Tem certeza que deseja devolver esse jogo?');
        if(confirmarDevolução){
            alert('Jogo devolvido')
            quatidadeDeJogosAlugados();
        }else{        
            imagem.classList.add('dashboard__item__img--rented');
            botao.classList.add('dashboard__item__button--return');
            botao.textContent = 'Devolver';
            alert('Devolução cancelada. Continue a se divertir!');
        }

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

function quatidadeDeJogosAlugados(){
    
    let jogosAlugados = document.querySelectorAll('.dashboard__item__img--rented');
    let totalAlugados = jogosAlugados.length;
    console.log(`Total de jogos alugados: ${totalAlugados}`);
}

document.addEventListener('DOMContentLoaded', quatidadeDeJogosAlugados);
1 resposta

Bom dia, Joanevan! Como está?

Incrível! Continue resolvendo os desafios e compartilhando com a comunidade Alura.

Notei que você utilizou o DOM com querySelector e classList para manipular dinamicamente os elementos da interface, aplicou de forma eficaz as classes em CSS para alternar entre alugado/disponível e compreendeu a importância do uso de eventos e funções auxiliares para manter o código organizado e responsivo.

Um próximo passo interessante seria explorar o uso do dataset no HTML para armazenar o status dos jogos de forma mais semântica. Veja o exemplo:

HTML

<div id="game-1" data-status="disponivel">
  <!-- conteúdo do jogo -->
</div>

JavaScript

let status = gameClicado.dataset.status;
console.log(`Status atual: ${status}`);

Resultado:

Status atual: disponivel

Isso permite controlar e acessar informações diretamente do HTML, o que pode ser muito útil para separar a lógica do estilo visual.

Ícone de sugestão Para saber mais:

Sugestão de conteúdo para você mergulhar ainda mais sobre o tema:

Alguns materiais estão em inglês, mas é possível compreendê-los usando o recurso de tradução de páginas do próprio navegador.

Fico à disposição! E se precisar, conte sempre com o apoio do fórum.

Abraço e bons estudos!

AluraConte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!