1
resposta

Solução não tão elegante, mas funcional

Fala jovens, bão? (Mineiro aqui).

Estou estudando aqui e percebi que eu tive uma solução diferente da proposta e gostaria de compartilhar aqui. Ela ficou maior (e menos elegante), mas funcional. Vou colocar com os meus comentários para ver se a comunicação minha como programador está clara.

// Soluções do desafio feitas pelo Matheus e comentadas para garantir a clareza das ideias.
// Desafio aqui consiste em usar todo o conhecimento de javaScript acumulado até esse ponto e aplicar para resolver a locação de jogos de tabuleiro

//Primeira parte: O botão ativado deverá ter escrito "Alugar" e o botão desativado deverá ter escrito "Devolver"
//Ao analisar o código vi que existe no texto um campo escrito alterarStatus(x) como sendo uma função chamada no botão de devolver o último jogo. Assumo que deva ser a função para alterar o status do texto do botão


//Esse nome da função está escrito no HTML e é chamado após o botão ser clicado. Remover linhas de console.log após finalizar.
function alterarStatus(id){
    let posicaoBotao;
    let jogoSelecionado = document.getElementById(`game-${id}`);
    let imagem = jogoSelecionado.querySelector('.dashboard__item__img');
    let botao = jogoSelecionado.querySelector('.dashboard__item__button');
    let nomeJogo = jogoSelecionado.querySelector('.dashboard__item__name');
    console.log(jogoSelecionado);
    console.log(imagem);
    console.log(botao);
    console.log(botao.className);
    console.log(imagem.className);
    alteraTextoBotao(botao);
    alteraClasseImagem(imagem);
}

//função que altera o texto do botão de "Alugar" para "Devolver" e vice e versa e aproveita para trocar a cor do botão
function alteraTextoBotao(botao){
    if(botao.textContent == "Alugar"){
        botao.textContent = ("Devolver");
        botao.className = ("dashboard__item__button dashboard__item__button--return");
        
    }else{
        botao.textContent = ("Alugar");
        botao.className = ("dashboard__item__button");
        
    }
    return;
}

//função que altera a classe da imagem do jogo clicado. Algo me diz que esse 'return' ali não é obrigatório, mas o seguro morreu de velho, né?!
function alteraClasseImagem(imagem){
    if(imagem.className == "dashboard__item__img dashboard__item__img--rented"){
        imagem.className = ("dashboard__item__img");
    }else{
        imagem.className = ("dashboard__item__img dashboard__item__img--rented");
    }
    return;
}

Aceito dicas da escrita da comunicação escrita através dos comentários. Alguns claramente são para o "Matheus do futuro" conseguir ler e rir de si mesmo, então divirta-se comigo nesses momentos onde parece que eu estou falando com um idiota (que é o "Matheus do futuro").

1 resposta

Olá, Matheus! Como vai? Adorei ver seu código e a forma como você se comunica através dos comentários. Isso é muito importante para o entendimento do código, tanto para você no futuro, quanto para outros desenvolvedores que possam vir a trabalhar com seu código.

Vamos lá, a sua solução está sim funcional e isso é o mais importante. A elegância do código vem com a prática e o aprimoramento constante. Afinal, estamos sempre aprendendo, não é mesmo?

Sobre seus comentários, eles estão claros e bem humorados, o que é ótimo. Só tenho algumas sugestões:

  1. Tente manter um padrão nos comentários. Por exemplo, se começou a escrever comentários completos e explicativos, mantenha assim em todo o código. Isso ajuda na leitura e no entendimento.

  2. Evite deixar comentários que não agregam ao entendimento do código, como "o seguro morreu de velho". Apesar de engraçado, pode gerar confusão para quem está lendo.

  3. Comentários que indicam algo a ser feito no futuro (como "Remover linhas de console.log após finalizar.") são chamados de "TODO" e são muito úteis. No entanto, é uma boa prática deixá-los destacados. Ex: // TODO: Remover linhas de console.log após finalizar.

  4. Sobre a função alteraClasseImagem(), você está correto, o return não é necessário, pois a função está apenas alterando o estado de um elemento e não precisa retornar nada.

  5. Por último, uma dica extra: em JavaScript, para comparar valores, é uma boa prática usar o operador de igualdade estrita (===) ao invés do operador de igualdade (==). Isso porque o === compara tanto o valor quanto o tipo de dado, evitando alguns erros inesperados.

Com o tempo e a prática, você vai aprimorar ainda mais seu código e seus comentários. Continue assim, você fez um ótimo trabalho! Parabéns.

Espero ter ajudado e bons estudos!