Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

O quão ruim / ineficaz é o meu código?

Durante a aula 02. 04 (Funções com JavaScript) eu decidi tentar fazer o meu próprio código js de alteração de atributos (braços, pernas...). Terminei e ficou funcional. Mas, na aula 04. 02 (Alterando o elemento) o professor fez de forma bem diferente e me surgiu a dúvida: meu código é ruim?

const controle = document.querySelectorAll(".controle-contador")
const somar = document.querySelectorAll(".somar") // Criei classes para soma e subtração em seus respectivos botões
const subtrair = document.querySelectorAll(".subtrair")

const numeroDeBotoes = controle.length - 1

for (let i = 0; i <= numeroDeBotoes; i++) {
    somar[i].addEventListener("click", () => {
        controle[i].value = parseInt(controle[i].value) + 1
    })

    subtrair[i].addEventListener("click", () => {
        controle[i].value = parseInt(controle[i].value) - 1
    })
}
1 resposta
solução!

Olá, Daniel! Tudo ok contigo?

Primeiramente, é importante ressaltar que não há um código certo ou errado, mas sim diferentes formas de resolver um problema. O código que você criou está funcional e realiza a alteração dos atributos desejados. No entanto, o código apresentado pelo professor na aula busca uma solução mais genérica e flexível.

No seu código, você seleciona os elementos de soma e subtração através de classes específicas ("somar" e "subtrair") e realiza as operações diretamente nos elementos de controle. Já no código do professor, ele utiliza o conceito de navegação no DOM para buscar o elemento pai dos botões de controle e, a partir dele, encontra o elemento de controle específico que deve ser alterado.

Essa abordagem do professor permite que o código seja mais genérico e possa ser aplicado a diferentes elementos de controle, sem a necessidade de criar classes específicas para cada um. Além disso, o código do professor utiliza o conceito de Data Attributes para tornar a lógica mais flexível e adaptável a possíveis mudanças no HTML.

Dessa forma, o código do professor pode ser considerado mais eficiente em termos de manutenção e escalabilidade, pois é capaz de lidar com diferentes elementos de controle de forma dinâmica. No entanto, isso não significa que o seu código seja ruim. Ele está funcionando corretamente e pode ser uma solução válida dependendo do contexto em que está sendo utilizado.

Quero também parabenizá-lo por sua iniciativa de criar um código funcional para a manipulação de elementos no DOM durante o curso. É ótimo ver que você está se dedicando e praticando as habilidades aprendidas.

Espero ter esclarecido sua dúvida! Se tiver mais alguma pergunta, é só me dizer.

Espero ter ajudado e bons estudos!

Reply: Você criou três arrays, `controle`, `somar` e `subtrair`, para armazenar elementos HTML com determinadas classes. Isso é uma abordagem válida, mas pode se tornar um pouco redundante se essas classes não forem usadas em outros lugares no seu código. Considere se vale a pena manter esses arrays ou se você pode selecionar diretamente os elementos quando necessário.

O loop for que você usou para adicionar os event listeners é adequado e cumpre o propósito de associar ações de soma e subtração aos botões correspondentes. No entanto, eu gostaria de chamar a atenção para algumas considerações que podem ajudar a melhorar o código:

  1. Eficiência: Embora o seu código funcione bem, você pode melhorar a eficiência ao evitar o uso excessivo de queries de seleção de elementos em cada iteração do loop. Você poderia armazenar as referências aos elementos fora do loop para evitar consultas repetitivas ao DOM.

  2. Legibilidade: Uma das metas importantes ao escrever código é torná-lo legível para você e outros desenvolvedores. Nesse sentido, dar nomes mais descritivos às variáveis pode facilitar a compreensão do que o código faz. Por exemplo, em vez de controle, você poderia usar elementosControle para indicar que se trata dos elementos que estão sendo controlados.

  3. Manutenção: Imagine que você precise adicionar mais funcionalidades ou fazer alterações no futuro. Seu código poderia se beneficiar de um pouco mais de modularidade. Separe a lógica de manipulação do DOM das ações de soma e subtração em funções diferentes para facilitar a manutenção e expansão.

function atualizarValor(elemento, valor) {
    elemento.value = valor;
}

function incrementarValor(elemento) {
    const valorAtual = parseInt(elemento.value);
    atualizarValor(elemento, valorAtual + 1);
}

function decrementarValor(elemento) {
    const valorAtual = parseInt(elemento.value);
    atualizarValor(elemento, valorAtual - 1);
}

for (let i = 0; i <= numeroDeBotoes; i++) {
    const botaoSomar = somar[i];
    const botaoSubtrair = subtrair[i];
    const elementoControle = controle[i];

    botaoSomar.addEventListener("click", () => {
        incrementarValor(elementoControle);
    });

    botaoSubtrair.addEventListener("click", () => {
        decrementarValor(elementoControle);
    });
}
  1. Acessibilidade: Além disso, é sempre bom considerar a acessibilidade ao desenvolver interfaces web. Certifique-se de que seus elementos interativos, como os botões de soma e subtração, sejam acessíveis aos usuários que dependem de tecnologias assistivas, como leitores de tela.