1
resposta

Alugando e devolvendo jogos - Tentando deixar o código desacoplado

Fiz uma primeira versão que funcionou mas pensando em reutilização não estava muito legal. Dando uma olhada na solução dos instrutores do vídeo consegui melhorar meu código nessa linha. Qualquer dica sobre o assunto será muito bem vinda. Segue meu código com foco no desacomplamento. Versão - 1 (Não havia visto a opacidade da imagem na div)

function alterarStatus(numeroProduto) {
  switch (numeroProduto) {
    case 1:
      alterarButton("game-1");
      break;
    case 2:
      alterarButton("game-2");
      break;
    case 3:
      alterarButton("game-3");
      break;
  }
}

function alterarButton(idElement) {
  let itemListaJogos = document.getElementById(idElement);

  itemListaJogos.childNodes.forEach((elemento) => {
    let list = elemento.nextSibling?.classList;
    let nodeName = elemento?.nextSibling?.localName;

    if (nodeName == "a") {
      list.toggle("dashboard__item__button--return");
      alterarTextoBotão(elemento, list);
    }
  });
}

function alterarTextoBotão(elemento, list) {
  list.forEach((item) => {
    if (item === "dashboard__item__button--return") {
      elemento.nextSibling.innerHTML = "Devolver";
    } else {
      elemento.nextSibling.innerHTML = "Alugar";
    }
  });
}

Versão 2 (Final)

function alterarStatus(id) {
  let li = document.getElementById(`game-${id}`);
  let botao = li.querySelector("a");

  alterarEstilo(li);
  alterarTextoBotão(botao);
}

function alterarEstilo(elemento) {
  let div = elemento.querySelector(".dashboard__item__img");
  let botao = elemento.querySelector("a");
  let listbotao = botao.classList;
  let listDiv = div.classList;

  listbotao.toggle("dashboard__item__button--return");
  listDiv.toggle("dashboard__item__img--rented");
}

function alterarTextoBotão(elemento) {
  elemento.classList;

  if (elemento.classList.contains("dashboard__item__button--return")) {
    elemento.innerHTML = "Devolver";
  } else {
    elemento.innerHTML = "Alugar";
  }
}
1 resposta

Oi Roger,

Excelente iniciativa em buscar um código mais desacoplado! 👍

Sua evolução da versão 1 para a versão 2 demonstra um bom entendimento dos conceitos de refatoração e reutilização.

Na primeira versão, a função alterarStatus usava um switch para mapear números de produtos para IDs de elementos, o que não é muito flexível. Já na segunda versão, você utiliza o ID diretamente, tornando a função mais genérica e fácil de manter. 💪

A função alterarButton da primeira versão também tinha uma lógica complexa para encontrar o botão e alterar seu texto. Na segunda versão, você simplificou isso usando querySelector e classList.toggle, o que torna o código mais legível e eficiente. 👏

A função alterarTextoBotão também foi simplificada na segunda versão, utilizando classList.contains para verificar o estado do botão e alterar o texto de forma mais direta.

Continue praticando e explorando novas formas de melhorar seu código! 💻