Average grade calculator (without support for ECTS).
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<link rel="stylesheet" href="bootstrap.min.css" type="text/css" /> | |
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> | |
<script> | |
$(document).ready(function() { | |
$('.grade').focus(); | |
$('input').keypress(function(event) { | |
if (event.which == 13) { | |
addRow(); | |
} | |
}); | |
$('#addRow').click(function() { | |
addRow(); | |
}); | |
function addRow() { | |
var $lastTrClone = $('#theTable tbody>tr:last').clone(true); | |
$lastTrClone.find(".grade").val(""); | |
$lastTrClone.insertAfter($('#theTable tbody>tr:last')); | |
$lastTrClone.find('.grade').focus(); | |
} | |
$('#remove').click(function() { | |
if ($("#theTable").find('tr').length <= 2) return false; | |
$(this).closest('tr').remove(); | |
}); | |
$('#done').click(function() { | |
var sum = 0; | |
var $grades = $('#theTable').find('.grade'); | |
var numberOfGrades = $grades.length; | |
$grades.each(function() { | |
var value = $(this).val(); | |
var grade = /^\d$/.test(value) ? parseFloat(value) : getValueFromLetter(value); | |
function getValueFromLetter(letter) { | |
switch (letter) { | |
case 'A' : return 6; | |
case 'B' : return 5; | |
case 'C' : return 4; | |
case 'D' : return 3; | |
case 'E' : return 2; | |
case 'F' : return 1; | |
} | |
} | |
sum += grade; | |
}); | |
var average = Math.round((sum / numberOfGrades) * 1000) / 1000; | |
$('#average').html('Average (1-6): <strong>' + average + '</strong>, average (0-5): <strong>' + (average - 1) + '</strong>'); | |
}); | |
}); | |
</script> | |
<style> | |
#container { | |
position: relative; | |
top: 50px; | |
width: 100%; | |
} | |
#content { | |
margin: 0 auto; | |
width: 50%; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="container"> | |
<div id="content"> | |
<button id="addRow">Add row</button> | |
<table id="theTable"> | |
<tbody> | |
<tr> | |
<th>Course name</th> | |
<th>Grade (1-6 or F-A)</th> | |
<th>ECTS</th> | |
</tr> | |
<tr class="fields"> | |
<td> | |
<input type="text" class="courseName" placeholder="(optional)" /> | |
</td> | |
<td> | |
<input type="text" class="grade" pattern="([ABCDEF]|[1-6])" /> | |
</td> | |
<td> | |
<input type="text" class="ects" value="7.5" readonly /> | |
</td> | |
<td> | |
<a id="remove" href="#">Remove</a> | |
</td> | |
</tr> | |
</tbody> | |
</table> | |
<button id="done">Calculate average</button> | |
<div id="average"> | |
</div> | |
</div> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment