Entrar Ainda não tem acesso?
1
resposta

[Dúvida] eu usei a logica, mas não sabia a sintaxe né, ai eu pesquisei, só que na aula meu codigo ficou diferente.

Referente ao curso Lógica de programação: praticando com desafios, no capítulo Projeto AluGames e atividade Alterando status do jogo clicado

por Davi Vidal Rogerio de Paula
| 10k xp | 1 posts

O meu código ficou assim oh

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");

  let estaAlugado = imagem.classList.contains("dashboard__item__img--rented");

  let mensagem = estaAlugado
    ? `Tem certeza que deseja devolver o jogo ${nomeJogo.textContent}?`
    : `Tem certeza que deseja alugar o jogo ${nomeJogo.textContent}?`;

  if (!confirm(mensagem)) return;

  imagem.classList.toggle("dashboard__item__img--rented");
  botao.classList.toggle("dashboard__item__button--return");
  botao.textContent = estaAlugado ? "Alugar" : "Devolver";
  /* Se antes estava alugado, então agora o botão deve ser ‘Alugar’.”
   Se antes não estava alugado, então agora o botão deve ser ‘Devolver’.*/
}

eu deixei esses comentados porque foi os que eu fiz usando a lógica que deram na aula

1 resposta
por Lorena Garcia
| 12833.7k xp | 19196 posts
Alura Scuba Team

Oii, Davi! Tudo bem?

Parabéns pela sua iniciativa!

Fico muito feliz em ver que você foi além da aula, pesquisou e implementou uma solução funcional. Isso é uma característica essencial de um bom desenvolvedor: a curiosidade.

O seu código não só está correto, como utiliza boas práticas que tornam a escrita mais limpa e concisa. Vamos entender o que aconteceu e por que ele ficou diferente do apresentado na aula?

Basicamente, você utilizou recursos da linguagem JavaScript que "resumem" aquelas várias linhas de if e else que fizemos juntos. Vou detalhar os dois pontos principais:

**1. O método toggle**
Na aula, nós verificamos manualmente se a classe existe para então remover ou adicionar (if/else com add/remove).
O método .toggle() faz exatamente esse trabalho de "alternar". Ele funciona como um interruptor: se a classe já existe, ele a remove; se não existe, ele a adiciona.

  • Seu código: imagem.classList.toggle("dashboard__item__img--rented");
  • Código da aula: O bloco inteiro de if/else com remove e add.

2. O operador ternário
Você utilizou aquela estrutura com ? e :. Isso se chama Operador Ternário. Ele é uma forma curta de escrever um if/else quando queremos apenas atribuir um valor.
A leitura é: Condição ? (se verdadeiro faça isso) : (se falso faça aquilo).

  • Seu código: botao.textContent = estaAlugado ? "Alugar" : "Devolver";
  • Tradução: "A variável estaAlugado é verdadeira? Se sim, escreva 'Alugar'. Se não, escreva 'Devolver'."

Por que a aula ensinou diferente?
No curso, o objetivo inicial é ensinar a lógica algorítmica passo a passo (verificar -> tomar decisão -> executar ação), para que vocês entendam o que acontece "por baixo dos panos". Mas, no dia a dia profissional, a sintaxe que você usou (com toggle e ternários) é bem comum.

E, achei genial você ter adicionado o confirm para evitar devoluções acidentais. Mandou muito bem na experiência do usuário!

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