<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Médias</title>
<style>
* {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
max-width: 100vh;
max-height: 100vw;
}
body {
background-color: lightgray;
}
h1 {
text-align: center;
padding: 20px;
}
section {
width: 350px;
margin: 10px auto;
background-color: white;
border-radius: 15px;
box-shadow: 2px 2px rgba(0, 0, 0, 0.315);
}
p {
padding: 5px;
margin: 5px;
text-align: center;
}
p > input {
width: 60px;
}
input#verificar {
display: block;
margin: auto;
cursor: pointer;
transition-duration: 2s;
}
input#verificar:hover {
background-color: yellow;
}
div#res {
text-align: center;
margin: 5px 0px;
}
</style>
</head>
<body>
<header>
<h1>Calculando minha média</h1>
</header>
<main>
<section>
<p>Nota de matématica: <input type="number" name="notam" id="notam"></p>
<p>Nota de Português: <input type="number" name="notap" id="notap"></p>
<p>Nota de História: <input type="number" name="notah" id="notah"></p>
<input id="verificar" type="button" value="Verificar" onclick="somarmedias()">
<div id="res">
resultado é!
</div>
</section>
</main>
<script>
var nota1 = document.querySelector('#notam')
var nota2 = document.querySelector('#notap')
var nota3 = document.querySelector('#notah')
var res = document.querySelector('div#res')
var notas = ((Number(nota1.value) + Number(nota2.value) + Number(nota3.value)) / 3)
function somarmedias(){
if(nota1.value == '' || nota2.value == '' || nota3.value == '') {
alert('Digite todas as notas.')
res.innerHTML('errou')
} else if (nota1.value >= 11 || nota2.value >= 11 || nota3.value >= 11){
alert('Digite um número com valor máximo de 10')
return notas
} else if (notas.value <= 5) {
res.innerHTML = (`Aprovado sua nota é ${notas}`)
} else {
res.innerHTML = (`Reprovado sua nota é ${notas}`)
}
}
</script>
</body>
</html>
