[Projeto] Alugames - Hora da prática | Lógica de programação: praticando com desafios

No projeto Alugames, uma confirmação ao devolver um jogo, solicitando ao usuário que confirme a devolução antes que ela seja concluída. Isso pode ajudar a evitar devoluções acidentais.

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


    if (imagem.classList.contains('dashboard__item__img--rented')) {
        if (confirm(`Você está devolvendo o jogo ${nomeJogo.textContent}. Deseja continuar?`)) {
            imagem.classList.remove('dashboard__item__img--rented');
            botao.classList.remove ('dashboard__item__button--return');
            botao.textContent = 'Alugar';
        }
        
    } else {
        imagem.classList.add('dashboard__item__img--rented');
        botao.classList.add ('dashboard__item__button--return');
        botao.textContent = 'Devolver';
    }
    
}

No projeto Alugames, crie uma função para imprimir no console a informação sobre quantos jogos foram alugados.

let jogosAlugados = 0;

function imprimirAlugueis () {
    console.log(`Jogos alugados: ${jogosAlugados}`);
}

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


    if (imagem.classList.contains('dashboard__item__img--rented')) {
        if (confirm(`Você está devolvendo o jogo ${nomeJogo.textContent}. Deseja continuar?`)) {
            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++;
    }
    
    imprimirAlugueis ();
}


document.addEventListener('DOMContentLoaded', function() {
    jogosAlugados = document.querySelector('dashboard__item__img--rented').lenght;
    imprimirAlugueis ();
    });

Crie um programa que verifica se uma palavra ou frase é um palíndromo.

verificarPalindromo();

function verificarPalindromo () {
    var palavra = "salas";
    var separarletras = palavra.split("");
    var palavraInvertida = separarletras.reverse ();
    palavraInvertida = palavraInvertida.join ("");
        if (palavra == palavraInvertida) {
            console.log (`A palavra ${palavra} é um palíndromo.`);
        } else {
            console.log (`A palavra ${palavra} NÃO É um palíndromo.`);
        }

}

Crie um programa com uma função que receba três números como argumentos e os retorne em ordem crescente. Exiba os números ordenados.

function ordenarNumeros (num1, num2, num3) {
    numOrdenados = [num1, num2, num3].sort((a,b) => a-b);
    console.log(`Números ordenados: ${numOrdenados.join(',')}`);
}

ordenarNumeros (7,8,2);

Oi, Aline! Como vai?

Gostei da confirmação com confirm antes da devolução e do contador de aluguéis. O problema aqui é a linha document.querySelector('dashboard__item__img--rented').lenght;: use querySelectorAll, adicione o ponto na classe e corrija length: document.querySelectorAll('.dashboard__item__img--rented').length. Também vale atualizar jogosAlugados lendo o DOM a cada alteração para evitar contagem negativa.

Uma dica interessante para o futuro é usar classList.toggle e uma função para contar os itens alugados no DOM. Veja este exemplo:


// Conta alugados ao carregar e sempre que alterar
let jogosAlugados = 0;

function contarAlugados() {
  return document.querySelectorAll('.dashboard__item__img--rented').length;
}

function imprimirAlugueis() {
  console.log('Jogos alugados: ' + jogosAlugados);
}

function alterarStatus(id) {
  const jogo = document.getElementById(`game-${id}`);
  const img = jogo.querySelector('.dashboard__item__img');
  const btn = jogo.querySelector('.dashboard__item__button');
  const nome = jogo.querySelector('.dashboard__item__name').textContent;

  const vaiDevolver = img.classList.contains('dashboard__item__img--rented')
    ? confirm('Voce esta devolvendo o jogo ' + nome + '. Deseja continuar?')
    : true;

  if (!vaiDevolver) return;

  img.classList.toggle('dashboard__item__img--rented');
  btn.classList.toggle('dashboard__item__button--return');
  btn.textContent = img.classList.contains('dashboard__item__img--rented') ? 'Devolver' : 'Alugar';

  jogosAlugados = contarAlugados();
  imprimirAlugueis();
}

document.addEventListener('DOMContentLoaded', function () {
  jogosAlugados = contarAlugados();
  imprimirAlugueis();
});

O código acima alterna classes, confirma a devolução, atualiza o texto do botão e recalcula jogosAlugados com base no DOM.

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

Garanta sua matrícula hoje e ganhe + 2 meses grátis