1
resposta

DESAFIO 2 (Sugestões)

Olá mudei algumas coisas, como na hora que clicar em cancelar aparecer (Aluguel/devolução do jogo "...." foi cancelado. está aí meu código final, também descobri que podia deixar o else entre chaves vazio que também ia ser cancelado, só não ia mostrar nada.

let jogosAlugados = 0;

function contarEExibirJogosAlugados() { console.log(Total de jogos alugados: ${jogosAlugados}); }

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

if (imagem.classList.contains('dashboard__item__img--rented')) {
    // Confirmação para devolver o jogo
    if (confirm(`Você confirma a devolução do jogo ${nomeJogo.textContent}?`)) {
        alert(`${nomeJogo.textContent} devolvido!`)
        imagem.classList.remove('dashboard__item__img--rented');
        clicar.classList.remove('dashboard__item__button--return');
        clicar.textContent = 'Alugar';
        jogosAlugados--;
    } else {
        alert(`Devolução do jogo ${nomeJogo.textContent} cancelado!`)
        // Ação caso o usuário cancele a devolução
        // Neste exemplo, poderia deixar vazio(opicional)
    }
} else {
    // Confirmação para alugar o jogo
    if (confirm(`Você confirma o aluguel do jogo ${nomeJogo.textContent}?`)) {
        alert(`${nomeJogo.textContent} alugado!`)
        imagem.classList.add('dashboard__item__img--rented');
        clicar.classList.add('dashboard__item__button--return');
        clicar.textContent = 'Devolver';
        jogosAlugados++;
    } else {
    alert(`Aluguel do jogo ${nomeJogo.textContent} cancelado!`)   
     // Ação caso o usuário cancele o aluguel
    // Neste exemplo, poderia deixar vazio(opicional)
    }
}
contarEExibirJogosAlugados();

}

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

1 resposta

Oii, Nathaly. Tudo bem?

Parabéns pela sua abordagem no Desafio 2 do curso de Lógica de Programação! É inspirador ver como você melhorou seu código, implementando funcionalidades como a confirmação de aluguel e devolução de jogos, além de oferecer feedback claro ao usuário quando uma ação é cancelada.

Seu uso de funções para contar e exibir o número de jogos alugados é muito eficiente, garantindo que o estado atual seja refletido de maneira precisa na interface. E, o tratamento das classes CSS e a alteração dinâmica dos elementos HTML são exemplos sólidos de como manipular o DOM de forma prática e responsiva.

Continue explorando novos desafios e aprimorando suas habilidades em programação. Parabéns mais uma vez e obrigada por compartilhar seu código conosco!

Um abraço e bons estudos.