1
I am developing an application where calculates the average that I validate the fields if they are properly filled and if the fields are filled and the sum of the notes is less than 10 it passes the data inputText to function that makes the calculation of the media and another function which returns the student’s status if it is approved,flunked. So I save the data typed in arrays and presenting in a table
But by clicking the calculate button it displays this message.
HTML
<body>
<form action="" method="post" class="formcss" name="form1" >
<h1>Dados do Aluno<br/>
<span class="titulo">Por favor, preencha os campos solicitados.</span>
</h1>
<div> </div>
<div>
<div class="rotulos">RGM :</div>
<input id="rgm" type="text" name="rgm" placeholder="Digite seu RGM" class="entrada" />
</div>
<div>
<div>
<div class="rotulos">Nome :</div>
<input id="nome" type="text" name="nome" placeholder="Nome completo" class="entrada" />
</div>
<div>
<div class="rotulos">Nota parcial :</div>
<input type="text" id="notaparcial" name="notaparcial"
placeholder="Digite aqui a nota parcial" class="entrada" />
</div>
<div>
<div class="rotulos">Nota exercícios :</div>
<input type="text" id="notaexercicios" name="notaexercicios"
placeholder="Digite aqui a nota dos exercícios" class="entrada" />
</div>
<div>
<div class="rotulos">Nota projeto :</div>
<input type="text" id="notaprojeto" name="notaprojeto"
placeholder="Digite aqui a nota no projeto" class="entrada" />
</div>
<div>
<div class="rotulos">Nota regimental :</div>
<input type="text" id="notaregimental" name="notaregimental"
placeholder="Digite aqui a nota regimental" class="entrada" />
</div>
<div>
<div class="rotulos"> </div>
<input type="button" id="btncalcular" value="Calcular" class="botao" />
<input type="button" id="btnlistar" value="Mostrar" class="botao" />
</div>
<div>
<div id="divresultado" class="rotuloretorno">Resultado...</div>
</div>
<div> </div><br>
</form>
</body>
CSS
<style type="text/css">
.formcss {
width: 55%;
background-color: #865027;
padding: 20px 30px 20px 30px;
font-size: 12px;
font-family: verdana;
color: #fff;
text-shadow: 2px 2px 2px #000;
border-radius: 25px;
margin: 0 auto;
}
h1 {
padding: 0px 0px 10px 0px;
border-bottom: 3px solid #000;
text-align: center;
}
.titulo {
font-size: 11px;
}
div {
margin: 0px 0px 20px;
}
.rotulos {
float: left;
width: 20%;
text-align: right;
padding-right: 10px;
margin-top: 10px;
font-weight: bold;
}
.rotuloretorno {
float: left;
width: 75%;
font-size: 14px;
font-family: verdana;
text-align: left;
padding-left: 200px;
padding-right: 10px;
margin-top: 10px;
font-weight: bold;
}
.entrada {
border: none;
color: #525252;
height: 30px;
line-height: 15px;
padding: 5px 0px 5px 5px;
width: 70%;
border-radius: 5px;
box-shadow: 2px 2px 2px #000;
background-color: #f5deb3;
}
.botao {
background-color: #2e1707;
border: none;
padding: 10px 25px 10px 25px;
color: #fff;
border-radius: 4px;
text-shadow: 1px 1px 1px #FFE477;
font-weight: bold;
box-shadow: 2px 2px 2px #3D3D3D;
}
.botao:hover {
color: #dbd9d9;
background-color: #030201;
}
</style>
Functions and Jquery
<script>
function validar() {
var nome= $("#nome").val();
var rgm= $("#rgm").val();
var parcial= $("#notaparcial").val();
var exercicios= $("#notaexercicios").val();
var projeto= $("#notaprojeto").val();
var regimental= $("#notaregimental").val();
if(nome == ""){
alert('Preencha o campo com seu nome');
form1.nome.focus();
}
else if(rgm == ""){
alert('Preencha o campo com rgm');
form1.rgm.focus();
}
else if(parcial == ""){
alert('Preencha o campo com a nota da parcial');
form1.rgm.focus();
}
else if(exercicios == ""){
alert('Preencha o campo com a nota dos exe');
form1.exercicios.focus();
}
else if(projeto == ""){
alert('Preencha o campo com a nota projeto');
form1.projeto.focus();
}
else{
alert('Preencha o campo com a nota regimental');
form1.notaregimental.focus();
}
}
function caculoMedia(n1,n2,n3,n4){
var media;
media=(n1+n2+n3+n4)/4;
return media;
}
function situacao(n1,n2,n3,n4){
var situacao="",media;
media=(n1+n2+n3+n4)/4;
if(media>=6){
situacao+="Aprovado";
}
else if(media<6){
situacao+="Exame";
}
else{
situacao+="Reprovado";
}
returnsituacao;
}
var nomes=[];
var indice=[];
var situacao=[];
var media=[];
var i=1;
window.onload = function(){
var btn = document.getElementById("btncalcular");
btn.onclick = function (){
if(validar){
if(parcial+exercicios+projeto+regimental<=10){
nomes[i]=$("#nome").val();
var parcial= $("#notaparcial").val();
var exercicios= $("#notaexercicios").val();
var projeto= $("#notaprojeto").val();
var regimental= $("#notaregimental").val();
var resp=caculoMedia(parcial,exercicios,projeto,regimental);
media[i]=resp;
var situacao=situacao(parcial,exercicios,projeto,regimental);
situacao[i]=situacao;
}
else{
alert("A soma das notas não podem ultrapassar 10");
}
}
}
document.getElementById("btnlistar").onclick=function(){
listarAlunos();
}
}
function listarAlunos(){
var conteudo="<table border='2'>";
conteudo+="<tr>";
conteudo+="<th>";
conteudo+="<div class='aluno'><p>Aluno</p></div>";
conteudo+="</th>";
conteudo+="<th>";
conteudo+="<div class='media'><p>Media</p></div>";
conteudo+="</th>";
conteudo+="<th>";
conteudo+="<div class='situacao'><p>Situacao</p></div>";
conteudo+="</th>";
conteudo+="</tr>";
//pos contator
for(var pos=0;pos<nomes.length;pos++){
conteudo+="<tr>";
conteudo+="<td>"+nomes[pos]+"</td>";
conteudo+="<td>"+media[pos]+"</td>";
conteudo+="<td>"+situacao[pos]+"</td>";
conteudo+="</tr>";
}
conteudo+="</table>";
document.getElementById("txtrelatorio").innerHTML=conteudo;
}
</script>