Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] Desafio: hora da prática

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

por RENATA AMORIM
| 6.8k xp | 1 posts

Segui a lógica do desafio e consegui fazer funcionar, fiz com que, ao clicar no botão, a imagem mude e o texto altere entre “Alugar” e “Devolver”, adicionei também um confirm() para que o usuário possa cancelar a devolução, mas não sei se essa é a melhor forma de organizar o código.

let gameClicado;
let imagem;
let botao;

function alterarStatus(id) {
   gameClicado = document.getElementById(`game-${id}`);
   imagem = gameClicado.querySelector('.dashboard__item__img');
   botao = gameClicado.querySelector('.dashboard__item__button, .dashboard__item__button--return');

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

 function Devolver(id) {
   let ok = confirm('Você deseja devolver o jogo?');

   if (ok) {
      alert('O jogo foi devolvido!');
      imagem.classList.remove('dashboard__item__img--rented');
      imagem.classList.add('dashboard__item__img');
      botao.classList.remove('dashboard__item__button--return');
      botao.classList.add('dashboard__item__button');
      botao.textContent = 'Alugar';
   }else {
      alert('Devolução do jogo cancelado!');
   }
}
2 respostas
solução!
por Karina Ivanova Varlamova
| 244.4k xp | 477 posts

Olá Renata!
Achei seu código funcional e bem organizado! Ele implementa uma lógica simples para alugar e devolver jogos em uma interface de dashboard.
Uma dica. Evite variáveis globais (gameClicado, imagem, botao). Essas variáveis são declaradas fora das funções, o que pode causar problemas se o código crescer ou se houver chamadas simultâneas. Declare-as dentro das funções, onde são usadas.

por Karina Ivanova Varlamova
| 244.4k xp | 477 posts
function alterarStatus(id) {
   const gameClicado = document.getElementById(`game-${id}`);
   const imagem = gameClicado.querySelector('.dashboard__item__img');
   const botao = gameClicado.querySelector('.dashboard__item__button, .dashboard__item__button--return');

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

function Devolver(imagem, botao) {
   if (confirm('Você deseja devolver o jogo?')) {
      alert('O jogo foi devolvido!');
      imagem.classList.remove('dashboard__item__img--rented');
      imagem.classList.add('dashboard__item__img');
      botao.classList.remove('dashboard__item__button--return');
      botao.classList.add('dashboard__item__button');
      botao.textContent = 'Alugar';
   } else {
      alert('Devolução do jogo cancelada!');
   }
}

Bons estudos!