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:
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.
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.
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);
});
}
- 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.
