Executando verificação de segurança...
1

Calculadora em JavaScript

Olá, pessoal!

Eu sou iniciante em programação e estou aprendendo JavaScript. Com a finalidade de treinar os meus conhecimentos, eu desenvolvi uma calculadora. Poderiam analizar o meu código e me apontar os possíveis casos de deselegância e desvios do padrão de produção? Desde de já, agradeço!

Link para o código

Carregando publicação patrocinada...
1

Rapaz, esta dificil de ler porque perdeu a formatacao de codigo. Tem como editar e formatar mais legal?

Uma sugestao, que tal remover o CSS para reduzir o escopo? Voce pode ate fazer outra pergunta depois para melhorar o CSS mais tarde.

Finalmente, se der, seria legal colocar este exemplo no https://codepen.io/ ou no https://jsfiddle.net/ assim agente pode ver executando e dar melhores sugestoes.

1
1

Opa, talvez eu me expressei mal. Pode deixar o javascript no tabnews apenas formate legal com o markdown para ficar facil de ler :D no codepen ficou excellente mas tem gente que prefere ler no tabnews.

O seu codigo esta bem bacana, bem melhor do que muita coisa que jah vi, parabens. Tem alguns pontos que pode melhorar principalmente na repeticao. Por exemplo:

Este treixo:

const idsNumeros = {
    num0: document.querySelector("#num0"),
    num1: document.querySelector("#num1"),
    num2: document.querySelector("#num2"),
    num3: document.querySelector("#num3"),
    num4: document.querySelector("#num4"),
    num5: document.querySelector("#num5"),
    num6: document.querySelector("#num6"),
    num7: document.querySelector("#num7"),
    num8: document.querySelector("#num8"),
    num9: document.querySelector("#num9")
}

const adicionarNumeros = {
    num0: function() {numeros.numeroVisor += "0"; formatar();},
    num1: function() {numeros.numeroVisor += "1"; formatar();},
    num2: function() {numeros.numeroVisor += "2"; formatar();},
    num3: function() {numeros.numeroVisor += "3"; formatar();},
    num4: function() {numeros.numeroVisor += "4"; formatar();},
    num5: function() {numeros.numeroVisor += "5"; formatar();},
    num6: function() {numeros.numeroVisor += "6"; formatar();},
    num7: function() {numeros.numeroVisor += "7"; formatar();},
    num8: function() {numeros.numeroVisor += "8"; formatar();},
    num9: function() {numeros.numeroVisor += "9"; formatar();}
};

const imprimirNumeros = {
    num0: idsNumeros.num0.addEventListener('click', adicionarNumeros.num0),
    num1: idsNumeros.num1.addEventListener('click', adicionarNumeros.num1),
    num2: idsNumeros.num2.addEventListener('click', adicionarNumeros.num2),
    num3: idsNumeros.num3.addEventListener('click', adicionarNumeros.num3),
    num4: idsNumeros.num4.addEventListener('click', adicionarNumeros.num4),
    num5: idsNumeros.num5.addEventListener('click', adicionarNumeros.num5),
    num6: idsNumeros.num6.addEventListener('click', adicionarNumeros.num6),
    num7: idsNumeros.num7.addEventListener('click', adicionarNumeros.num7),
    num8: idsNumeros.num8.addEventListener('click', adicionarNumeros.num8),
    num9: idsNumeros.num9.addEventListener('click', adicionarNumeros.num9)
}

Pode ser substituido por algo assim:

/*
idsNumeros, adicionarNumeros e imprimirNumeros 
Podem ser simplificados como abaixo.
*/
for (let i=0; i<10; i++) {
  const formatarVisor = () => {
    numeros.numeroVisor += i;
    formatar();
  }
  // Adicionar click evento nos elementos de numero
  document.querySelector(`#num${i}`).addEventListener('click', formatarVisor)
}

Tem outras melhorias mas elas vao deixar o codigo totalmente diferente. Tem como melhorar a abstracao, eu percebi que voce agrupou elementos semelhantes em consts por exemplo salvarOperacao mais ao inves de agrupar elementos semelhantes seria legal se usarmos abstracoes. Normalmente aprendemos melhores abstracoes com experiencia por isso eu nao quiz mudar muito. Se eu tiver um tempinho hoje eu tento re-escrever o codigo para voce dar uma olhada.

Contudo, no genral esta muito bom.

1

Olá, Raf!
Esse método de simplificação que você me apresentou é incrível, nem havia cogitado nessa possibilidade.
Muito obrigado por retirar um período do seu tempo para olhar o meu código, apontar meus erros e transmitir um pouco do seu conhecimento!

1

Opa Guilherme,

Escrevi um pouco de codigo para mostrar como seria algo que voce provavelmente vai ver em producao: https://codepen.io/rafasantos-the-bashful/pen/JjBXQoK

Esta incompleto e voce pode continuar se quiser. Este tipo de codigo nao eh necessariamente mais simples. Contudo tem a vantagem de ser melhor de manter e esta mais alinhado com os principios SOLID https://medium.com/desenvolvendo-com-paixao/o-que-%C3%A9-solid-o-guia-completo-para-voc%C3%AA-entender-os-5-princ%C3%ADpios-da-poo-2b937b3fc530

Naquele codigo, preste atencao no visor, processador e acoes essas sao abstracoes e normalmente codificamos com abstracoes. Infelizmente, eh algo que adiquire com tempo e nao eh muito facil de explicar, voce pega com o tempo e praticando.

Bom, tenta implementar a subtracao voce vai ver que sera moleza.

abrs

1