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