Entrar Ainda não tem acesso?
1
resposta

Desafio Alugames completo

Referente ao curso Lógica de programação: praticando com desafios, no capítulo Projeto AluGames e atividade Desafio: hora da prática

por Leonardo Carvalho
| 15.8k xp | 17 posts
let jogosAlugados = 0;
function contarEExibirJogosAlugados(){
    console.log(`total de jogos alugados: ${jogosAlugados} `);
}

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

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';
    jogosAlugados --; 

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

      botao.textContent = 'devolver';
      jogosAlugados ++; 
}
contarEExibirJogosAlugados();


}

document.addEventListener('DOMContentLoaded', function() {
    jogosAlugados = document.querySelectorAll('.dashboard__item__img--rented').length;
    contarEExibirJogosAlugados();
});

function ordenarNumeros(a, b, c) {
    const numerosOrdenados = [a, b, c].sort((x, y) => x - y);
    console.log(`Números ordenados: ${numerosOrdenados.join(', ')}`);
}
1 resposta
por Lorena Garcia
| 13474.9k xp | 19974 posts
Instrutor

Oii, Leonardo!

Que excelente entrega. Você conseguiu unir os conceitos de manipulação de classes CSS com a lógica de contagem e eventos do navegador. É muito bom ver como você estruturou a lógica para que o sistema já inicie sabendo quantos jogos estão alugados através do DOMContentLoaded.

Pontos positivos do seu código:

  • Controle de estado: O uso da variável jogosAlugados sendo incrementada e decrementada dentro da função alterarStatus mostra que você compreendeu como gerenciar dados que mudam conforme a interação do usuário.
  • Sincronização inicial: Utilizar o document.querySelectorAll(...).length logo no carregamento da página evita que a contagem comece do zero caso já existam jogos marcados como alugados no HTML original.
  • Organização comfunções: Separar a exibição do console em uma função específica (contarEExibirJogosAlugados) deixa o código mais limpo.

Dica para o Desafio 1 (confirmação):

Notei que no seu código da função alterarStatus, você ainda não incluiu a janelinha de confirmação que o desafio propôs. Adicionar essa verificação é uma prática comum para evitar ações acidentais em sistemas reais.

Você pode inserir o confirm() logo após verificar se o jogo está alugado:

if (imagem.classList.contains('dashboard__item__img--rented')) {
    // Pergunta ao usuário antes de prosseguir com a devolução
    if (confirm(`Você tem certeza que deseja devolver o jogo ${nomeJogo.textContent}?`)) {
        imagem.classList.remove('dashboard__item__img--rented');
        botao.classList.remove('dashboard__item__button--return');
        botao.textContent = 'alugar';
        jogosAlugados--;
    }
}

Continue firme nos estudos.

Conteúdos relacionados
Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!

Tópicos relacionados

Mostrar mais tópicos Mostrar menos tópicos

Conteúdos Alura com o tema

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Graduação | Pós-graduação | MBA