Fiz tudo na mão, algumas duvidas quando pesquisei no google a ia ja vinha com exemplos parecidos, mas tambem fui na documentação tambem
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/every
https://www.w3schools.com/jsref/jsref_touppercase.asp#:~:text=apply()%20construct()%20defineProperty,()%20trimStart()%20valueOf()
https://www.w3schools.com/jsref/jsref_trim_string.asp
Não tem css, quero deixar para fazer outro momento quando pegar para estudar de fato o css, deixei comentarios propositalmente pois me ajudou a entender caso eu tenha duvidas futuras
Sempre temos algo a melhorar, fico feliz com sugestões, tirando o css kk
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Media</title>
</head>
<body>
<h1>Calculo de media</h1>
<h4>Informe a media.</h4>
<div>
<div>
Informe o nome do aluno:
<input
type="text"
id="nomeAluno"
placeholder="informe o nome do Aluno"
/>
</div>
<div>
Informe as notas
</div>
<div>
Nota 1:
<input type="number" id="nota1" placeholder="Informe a Nota 1" max="10" min="0" />
</div>
<div>
Nota 2:
<input type="number" id="nota2" placeholder="Informe a Nota 2" max="10" min="0"/>
</div>
<div>
Nota 3:
<input type="number" id="nota3" placeholder="Informe a Nota 3"max="10" min="0" />
</div>
<div>
Nota 4:
<input type="number" id="nota4" placeholder="Informe a Nota 4" max="10" min="0"/>
</div>
</div>
<div>
<button onclick="submitNota()"> Verificar notas</button>
<button onclick="novoAluno()" id="novoAluno" disabled>Novo Aluno </button>
</div>
<div>
<h2>Resultado</h2>
</div>
<script src="app.js" defer></script>
</body>
</html>
app.js
function exibirResultado(tag, texto) {
let campo = document.querySelector(tag);
campo.innerHTML = texto
}
function calcularMedia(nota1, nota2, nota3, nota4) {
let media = (nota1 + nota2 + nota3 + nota4) / 4;
return media.toFixed(1);
}
function verificaAprovacao(totalMedia, nomeTratato) {
return totalMedia >= 7 ? exibirResultado('h2', `Parabens ${nomeTratato} foi aprovado com media: ${totalMedia}`) : exibirResultado('h2', `Infelizmente ${nomeTratato} foi REPROVADO com media: ${totalMedia} `)
// `Parabens ${nomeTratato} foi aprovado com media: ${totalMedia}` : `Infelizmente ${nomeTratato} foi REPROVADO com media: ${totalMedia} `
}
function submitNota() {
let nomeAluno = document.querySelector('#nomeAluno').value;
let nota1 = parseFloat(document.querySelector('#nota1').value);
let nota2 = parseFloat(document.querySelector('#nota2').value);
let nota3 = parseFloat(document.querySelector('#nota3').value);
let nota4 = parseFloat(document.querySelector('#nota4').value);
const nomeTratato = nomeAluno.toUpperCase().trim();
let verificaNotas = [nota1, nota2, nota3, nota4]
//uso o every() do js para validar o arry conforme minha condição e tem que retortar todas true
let notasValidas = verificaNotas.every(nota => !isNaN(nota) && nota >= 0 && nota <= 10);
if (nomeAluno === "") {
alert("Favor verificar o Nome!")
return
} else if (!notasValidas) {
alert("Favor verificar as NOTAS!")
return
} else {
let totalMedia = calcularMedia(nota1, nota2, nota3, nota4)
console.log(`media: ${parseFloat(totalMedia)}`);
if (totalMedia) {
verificaAprovacao(totalMedia, nomeTratato)
console.log(verificaAprovacao(totalMedia, nomeTratato));
}
//uso para habilitar o botão de novo aluno que deixei disabilitado no html
//document.getElementById('novoAluno').removeAttribute('disabled');
//Outra forma de fazer menos verbosa para desabitar o botão;
document.getElementById('novoAluno').disabled = false
}
}
function limpaCampoNotas() {
let limpaCampoInput = document.querySelectorAll('input');
//faço o forEach para andar por todos os campos 'input' declarados acima em vez de declarar assim
// document.querySelector('#nomeAluno').value = '';
// document.querySelector('#nota1').value = '';
// document.querySelector('#nota2').value = '';
limpaCampoInput.forEach(campo => {
campo.value = '';
});
}
function novoAluno() {
limpaCampoNotas()
//document.getElementById('novoAluno').setAttribute('disabled', false);
//outra forma de fazer que tambbem funciona
document.getElementById('novoAluno').disabled = true
}
