Sugestão para deixar esse cód. js mais limpo

[L43RC10]

Boa noite pessoal,
Fiz um programa q calcula a media de notas, mais acho q da para refatora-lo, pq acredito q fiz uso excessivo do if..
é possivel deixar esse codigo mais limpo?

Outra coisa, minha intenção é de q assim q o user der o comando para calcular, os 4 inputs devem ser resetados.. escrevi esse trecho de cód. abaixo para isso, mais não funcionou.. seria isso msm?
document.getElementsByTagName('input').value = '';

Abaixo segue o endereço do repositório:
https://github.com/L43RC10/Calcular_Media

[glauberm]

Você tem que colocar esses inputs dentro de um form. Daí você pode resetar eles na submissão, e as validações que você está fazendo para checar se os campos estão vazios, e se são maiores que 0 e menores que 10, podem ser feitas direto no HTML. Colocar os valores em um array e iterar por eles também diminuiria algumas linhas de código.

Dá uma olhada nesse pen: https://codepen.io/glauberm/pen/OJXPGdP

[L43RC10]

Boa noite @glauberm,
legal a solução proposta por vc, na vdd eu queria ver um esquema q usasse o min. de html, focar mais no js msm.. mais as dicas q vc deu referente a iteração foram boas tb

[L43RC10]

Resolvi a questão do reset dos inputs com uma função, tentei com form.reset(); mais não consegui, acho q foi devido a não ter colocado um form no meu cód. html.. a solução para limpar os inputs foi criar a função abaixo:
function limpar(){document.querySelectorAll('input').forEach(input => input.value = '');}

Depois eu apenas chamei a função no laço condicional..

essa parte ficou legal, agr vou pesquisar mais sobre manipulação de array pra deixar esse cód. mais inteligente

[ninetails]

Opa, fazendo minha função de "chato dos PRs" rs

Gostei pra caramba que vc deixou explícito a função limpar 👍
Mesmo que em teoria o addEventListener seja chamado somente uma vez, seria legal deixar a função limpar do lado de fora... sei que não seria o ideal jogar variáveis globais mas lembra que se este addEventListener chamasse a função que está sendo passada dentro dela mais de uma vez, ela teria que criar uma instância da função limpar para cada chamada que acontecesse

---

Dê nome às coisas...

E se possível, leia o livro Código Limpo, do Tio Bob para entender o porquê. Evite abreviações, nomes genéricos como btn.... Sei que pro exemplo é suficiente porém a pergunta foi como deixar o código mais limpo e não só os ifs rs

---

Use const para variáveis que não sofrerem reatribuição

Outra coisa legal é usar let somente com variáveis que sofrem alterações ou novas atribuições, por exemplo: um contador que é atualizado que recebe um número inteiro e a cada contagem, o valor dele é alterado. Como objetos no JavaScript não guardam valores, apenas ponteiros para valores na memória, ao modificar os atributos do objeto você não muda a referência, logo não muda o valor da variável em si e com isso é recomendável usar const . Na verdade em todos os lugares da sua função você está utilizando valores sem reatribuir novos valores, logo creio que todos possam ser trocados por const.

---

DOM não é JavaScript mas você já tá utilizando

Algo que ressalto é que o @glauberm fez uma solução e ficou bem elegante para controle de formulário. Sei que para aprender vc quer tentar utilizar o mínimo de HTML porém você já está utilizando o DOM quando chama document ponto alguma coisa, e isso também não é JavaScript, é API do navegador, tal como o FormData. Utilize-as ao seu favor, já existem interfaces (APIs) prontas do próprio navegador para lidar da forma mais semântica possível tanto de código quanto de output e elas serão suas aliadas.

Depois com calma, tenta dar uma lida na documentação do site da MDN que é bem rica e serve de referência para trabalhar com Frontend e daí tenta ver onde vc errou, brinque mais com o código.

---

Extraia partes menores do seu código para funções que faça sentido

Em relação a repetição de comparações. Você pode criar novas funções de comparação e utilizá-las da mesma forma que fez com a função limpar:

function isEmpty (element) {
  return !element.value.length
}

e seu if na linha 42 ficaria:

if(isEmpty(inputNumero1) || isEmpty(inputNumero2) || isEmpty(inputNumero3) || isEmpty(inputNumero4)){

Você pode fazer o mesmo para as validações numéricas.

---

Generalize suas comparações

Para diminuir os OR, você pode acumular os elementos num Array e utilizar funções de laço como map e reduce, caso não saiba como utilizar é um tópico bem bacana para aprender. Porém também é possível utilizar os laços de repetição tradicionais como while e for enquanto que da mesma forma você vai acumulando o resultado.

O ganho com isso é o seguinte: o que acontece quando vem um número novo? Quanto código você vai ter que duplicar para adicionar comparações para este novo número?

---

Questionando os ifs

Já para os ifs, uma leitura que recomendo é ler sobre try...catch e fazer pontos de saída de dentro de uma função quando você encontrar algo que não te possibilite calcular o valor final.

---

Eu sei que boa parte do que falei parece bem avançado para o que você deve estar vendo/estudando. Vá com calma. Viu que não entendeu legal uma coisa, para e estuda... Depois code cada parte separado e descubra novos achados, expandindo aos poucos teu conhecimento. Todo dia tem coisa nova em frontend, não precisa se apressar pq algo que vc aprendeu pode estar obsoleto lá na frente ou ter formas melhores de serem resolvidas (como o exemplo do FormData que é algo até que "recente" rs), mas também não quer dizer que não é interessante de serem aprendidas pois o conhecimento sempre agrega.

[L43RC10]

Legal @ninetails, obrigado pelas orientações,
realmente tem muita coisa q preciso fixar na mente, os laços de repetições e o array, principalmente, por hora.. vou ter q usar de muita disciplina pra estudar e reter todo esse conhecimento.. parece q quanto mais estudo, mais confuso fica cara.. kk.. esse negocio de estudar toda a linguagem ao msm tempo não ta dando certo não.. esquema é fazer igual vc falou, estudar cada processo aos poucos e com muita calma

[ninetails]

Esse sentimento vale pra todo mundo rs. TI evolui muito rápido e a gente sempre correndo atrás do próprio rabo, achando que aprendeu algo e amanhã surgiu algo novo uaehueahua

Assim, o que eu recomendo a fazer é: crie um plano de estudos com dois objetivos, um a curto prazo e outro a longo prazo. O a longo prazo vc escolhe algo completo como querer fazer um aplicativo que funciona de tal maneira e que vai ter essas coisas, e no objetivo de curto prazo vc vai pegando o que vc consegue fazer ou o que parece mais factível fazer pra chegar no objetivo a longo prazo. E sempre vai chegar esses objetivos a curto prazo que vc não vai saber fazer, mas vão estar bem "fragmentados" pra vc conseguir se focar no que estudar um ou poucos assuntos específicos. Só que outra coisa: nunca escreva esses objetivos em pedra, hoje você faz algo e amanhã muda de idéia ou começa a desmotivar, só encontrar outro objetivo tentando aproveitar, se possível, o que vc fez anteriormente.

No mais sei que tem diversas threads no forum falando sobre guias de estudo, como se manter motivado, como ter idéias pra esses objetivos ou talvez ache uma metodologia melhor do que a que falei... E infelizmente, a parte do "como melhorar código" é mais no Google mesmo ou cursos........e aprendendo conforme vc vai crescendo profissionalmente pois apesar de ter "pequenos consensos", ainda possui critérios bem subjetivos. Mas achei bem foda tua preocupação cedo sobre o assunto! 👍