Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Alugames + Desafios

Conseguir solucionar todos os desafios do Alugames, mas confesso que ainda não entendi muito bem a resolução do desafio 2 referente ao 'addEventListener' e 'DOMContentLoaded'.

function confirmarAcao () {
    let confirmacao = confirm('Tem certeza que deseja devolver o jogo?');

    if (confirmacao) {
     alert('Jogo devolvido!');
    } else {
     alert('Devolução cancelada');
     return botao;
    }
 };

let jogosAlugados = 0;

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

function alterarStatus (id) {
    let gameClicado = document.getElementById(`game-${id}`);
    //A variável imagem será correspondente ao elemento <div>
    let imagem = gameClicado.querySelector('.dashboard__item__img');
    let botao = gameClicado.querySelector('.dashboard__item__button');

    if (imagem.classList.contains('dashboard__item__img--rented')) {
        confirmarAcao();
        //Se o elemento tem a classe dashboard__item__img--rented, precisamos removê-la do elemento.
        //remove o opaco da imagem
        imagem.classList.remove('dashboard__item__img--rented');
        //remove o botão preto
        botao.classList.remove('dashboard__item__button--return');
        //muda o texto do botão de 'Devolver' para 'Alugar'
        botao.textContent = 'Alugar'; 
        jogosAlugados--;
        //se não, se o jogo estiver para devolver
    } else {
        //adiciona opaco a imagem
        imagem.classList.add('dashboard__item__img--rented'); 
        //adiciona o preto no botão       
        botao.classList.add('dashboard__item__button--return');
        //muda o texto do botão de 'Alugar' para 'Devolver'
        botao.textContent = 'Devolver';
        jogosAlugados++;
    } //Com isso, conseguimos ter o efeito de: clicar; verificar se a classe está presente; se estiver, removê-la; e se não estiver, adicioná-la.
    contarJogosAlugados();
    };

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

Desafio 3 - foi desafiador mas no final consegui e ainda implementei a questão de acentos, símbolos e letras maiúsculas

verificarSeEPalindromo();

function verificarSeEPalindromo () {
    let palavraOuFrase = 'Socorram-me subi no ônibus em marrocos';
    //Colocar a palavra ou frase em minusculo e retirar os espaçamentos entre as palavras e ignorar os acentos e símbolos
    let minusculoESemEspaco = palavraOuFrase.toLowerCase().replace(/[^a-zA-Z0-9]/g, '');
    
    //Separar as letras ou palavras
    let separandoAsLetrasOuPalavras = minusculoESemEspaco.split('');
  
    //Reverter as letras ou palavras
    let palavraOuFraseInvertida = separandoAsLetrasOuPalavras.reverse();

    //Unir a lista de arrays
    palavraOuFraseInvertida = palavraOuFraseInvertida.join('');

    //Verificar se a palavra ou frase é um palíndromo
    if (minusculoESemEspaco == palavraOuFraseInvertida) {
        console.log(`A palavra ou frase '${palavraOuFrase}' é um palíndromo!`);
    } else {
        console.log(`A palavra ou frase '${palavraOuFrase}' não é um palíndromo!`);
    };
    
};

Desafio 4 - Fiz de uma forma diferente, tomei como base a documentação do Mdn e depois notei que está diferente da resolução apresentada pela Alura (ao qual tentei entender a lógica, mas fiquei confusa, então deixei da forma que fiz). Mas o código funciona na mesma.

let numerosAleatorios = [874, 69, 175]

function numerosEmOrdemCrescente(a, b) {
    return a - b;
}

console.log(`Números em ordem crescente: ${numerosAleatorios.sort(numerosEmOrdemCrescente)}`);
1 resposta
solução!

Oii, Thaynara!

Vou tentar explicar de uma forma que faça sentido para você.

O addEventListener é uma forma de adicionar um ouvinte de eventos a um elemento do DOM. No seu caso, você tá usando document.addEventListener('DOMContentLoaded', function() {...}). Isso significa que você tá dizendo ao navegador pra executar a função fornecida assim que o documento HTML for completamente carregado e analisado. É uma prática comum para garantir que todo o HTML esteja disponível antes de tentar manipular elementos do DOM.

No seu código, você usa DOMContentLoaded para contar quantos jogos estão alugados assim que a página é carregada. Isso é feito com a linha:

jogosAlugados = document.querySelectorAll('.dashboard__item__img--rented').length;

Aqui, document.querySelectorAll('.dashboard__item__img--rented') seleciona todos os elementos que têm a classe dashboard__item__img--rented, que indica que o jogo está alugado. O método .length conta quantos desses elementos existem, e esse número é atribuído à variável jogosAlugados.

Essa abordagem é boa porque garante que o estado inicial da página (quantos jogos já estão alugados) seja conhecido assim que a página termina de carregar, permitindo que você comece a interagir com a página de forma consistente.

Um abraço e bons estudos.