Saturday, January 10, 2015

Simple grading system jQuery.

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>

Math Marks:
<input type="text" id="math" />
<br>English Marks:
<input type="text" id="english" />
<br>History Marks:
<input type="text" id="history" />
<br>Spanish Marks:
<input type="text" id="spanish" />
<br>
<button>Show Result</button><br>
<div id="result"></div>

<script type="text/javascript">

var button = document.getElementsByTagName('button');
button[0].onclick = calc;

function calc() {
   var h;

   var d = document.getElementById('math').value;
   var e = document.getElementById('english').value;
   var f = document.getElementById('history').value;
   var g = document.getElementById('spanish').value;
   var avg = (parseFloat(d) + parseFloat(e) + parseFloat(f) + parseFloat(g)) / 4;

   if (avg >= 75) {
       h = "Passed!";
   }
   if (avg <= 74) {
       h = "Failed!";
   }
   if (d && e && f && g) {
       document.getElementById('result').innerHTML = "The average is " + avg + " which means you have " + h;
   } else {
       document.getElementById('result').innerHTML = "Please fill all inputs first."
   }
}

</script>


Output :)

1)

2)

No comments:

Post a Comment