atilberk/KUSIS-GPA-Calculator.html

## KUSIS-GPA-Calculator.html
<html>
<head>
	<meta charset="UTF-8">
	<title>KUSIS GPA Calculator</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
	<script type="text/javascript">

	var cues = {
		"Course	Description	Term	Grade	Units	Status Incl GPA":'Chrome',
		"Course 	Description 	Term 	Grade 	Units 	Status 	Incl GPA":'Firefox',
		"CourseDescriptionTermGradeUnitsStatusInclGPA":'Nospace'
	};
	var lookup = {
		'A+':4.3,
		'A':4.,
		'A-':3.7,
		'B+':3.3,
		'B':3.,
		'B-':2.7,
		'C+':2.3,
		'C':2.,
		'C-':1.7,
		'D+':1.3,
		'D':1.,
		'F':0.,
		'S':0.,
		'U':0.,
		'W':0.,
		'I':0.,
		'AU':0.,
		'T':0.,
		'AP':0.,
		'NA':0.,
		'':0.
	}
	var statuses = {
		"Taken":"",
		"InProgress":"",
		"Transferred":""
		};
	var result = {'gpa':0., 'inConsideration': {}, 'outConsideration': {}};

	function isValidInput(candidateInput) {
		var candidates = candidateInput.split('\n');
		var lines = [];
		for (var i=0;i<candidates.length;i++) {
			//if (candidates[i].replace(/\t/g,'').length > 0) {
			if (candidates[i].replace(/\t/g,'').length > 0 && isLetterOrDigitOrSpace(candidates[i][0])) {
				lines.push(candidates[i]);
			}
		}
		for (var i=0;i<lines.length;i++) {
			if (lines[i].replace(/ |\t/g,'') in cues) {
				return (i+7 < lines.length && lines[i+4] in lookup && /^[0-9]+.00$/.test(lines[i+5]));
			}
		}
		return false;
	}

	function preprocessInput(rawInput) {
		var candidates = rawInput.split('\n');
		var lines = [];
		for (var i=0;i<candidates.length;i++) {
			if (!(candidates[i].replace(/ |\t/g,'') in statuses) && candidates[i].replace(/\t/g,'').length > 0 && isLetterOrDigitOrSpace(candidates[i][0])) {
				lines.push(candidates[i]);
			}
		}
		var i;
		for (i=0;i<lines.length;i++) {
			if (lines[i].replace(/ |\t/g,'') in cues) {
				i++;
				break;
			}
		}
		var input = {'inConsideration':{},'outConsideration':{}};
		var key = 0
		while (i < lines.length && lines[i+3] !== undefined && lines[i+3].trim() in lookup && /^[0-9]+.00$/.test(lines[i+4])) {
			var semester = lines[i+2].split(' ')[0].substring(0,2).toUpperCase() + "'" + lines[i+2].split(' ')[1].substring(2);
			if ((lines[i].split(' ')[0] != 'ELC') && // If the course code does not start with ELC
				( !(lines[i] in courseNameSet(input.inConsideration)) || (lookup[lines[i+3].trim()] > getObjFromCourse(input.inConsideration,lines[i])['grade']) ) // couse is not taken yet, if taken before, check if the grade is better
				) {
				if (lines[i] in courseNameSet(input.inConsideration)) {
					ckey = getKey(input.inConsideration, lines[i]);
					input.outConsideration[ckey] = Object.create(input.inConsideration[ckey]);
					delete input.inConsideration[ckey];
				}
				input.inConsideration[key+""] = {'course': lines[i], 'letter':lines[i+3],'grade':lookup[lines[i+3].trim()],'credits':parseFloat(lines[i+4]), 'semester':semester};
				key++;
			} else {
				input.outConsideration[key+""] = {'course': lines[i], 'letter':lines[i+3],'grade':lookup[lines[i+3].trim()],'credits':parseFloat(lines[i+4]), 'semester':semester};
				key++;
			}
			i+=6;
		}
		return input;
	}

	function calculate(input) {
		var sumGrades = 0.;
		var sumCredits = 0.;
		var onCalc = {};
		var offCalc = input.outConsideration;
		for (var key in input.inConsideration) {
			if (input.inConsideration[key]['letter'] == 'F' || input.inConsideration[key]['grade'] != 0.) {
				sumGrades += input.inConsideration[key]['grade'] * input.inConsideration[key]['credits'];
				sumCredits += input.inConsideration[key]['credits'];
				onCalc[key] = input.inConsideration[key];
			} else {
				offCalc[key] = input.inConsideration[key];
			}
		}
		return {'gpa':sumGrades / sumCredits, 'inConsideration':onCalc, 'outConsideration': offCalc};
	}

	function courseNameSet(courseObjSet) {
		var set = {};
		for (var key in courseObjSet) {
			set[(courseObjSet[key].course)] = 0;
		}
		return set;
	}

	function getKey(set,courseName) {
		for (var key in set) {
			if (set[key].course == courseName) {
				return key;
			}
		}
		return "nokey";
	}

	// returns the course with courseName, the one with the highest grade if multiple
	function getObjFromCourse(set,courseName) {
		grade = -1.;
		element = null;
		for (var key in set) {
			e = set[key];
			if (e.course == courseName) {
				g = e.grade;
				if (grade < g) {
					grade = g;
					element = e;
				}
			}
		}
		return e;
	}

	function isLetterOrDigitOrSpace(str) {
  	return str.length === 1 && str.match(/[\sa-z0-9]/i) != null;
	}

	$(document).ready(function() {
		$("#gpa-info").bind("paste", function() {
			setTimeout(function() {
				var inputText = $("#gpa-info").val();
				if(isValidInput(inputText)) {
					var input = preprocessInput(inputText);
					result = calculate(input);
					$("#result").html(
						"<span class='success'>Your GPA is "
						+ "<span class='gpa'>"+result.gpa.toFixed(2)+"</span></span>"
						);
					var receipt = "<table id='both'><tr><td><h2>Courses included:</h2></td><td><h2>Courses excluded:</h2></td></tr>"
					+"<tr><td><table class='receipt-table' id='included'><tr><th></th><th>Course</th><th>Semester</th><th>Letter</th></tr>";
					for(var key in result.inConsideration) {
						receipt += "<tr data-key='" + key + "'><td><span class='addrmbtn rmbtn'>-</span></td><td>"+result.inConsideration[key]['course']+"</td><td>"+result.inConsideration[key]['semester']+"</td><td>"+result.inConsideration[key]['letter']+"</td></tr>";
					}
					receipt += "</table></td>"
					+"<td><table class='receipt-table' id='excluded'><tr><th></th><th>Course</th><th>Semester</th><th>Letter</th></tr>"
					for(var key in result.outConsideration) {
						receipt += "<tr data-key='" + key + "'><td>"
						+ ((result.outConsideration[key]['grade'] > 0. || result.outConsideration[key]['letter'] == 'F' ) ? "<span class='addrmbtn addbtn'>+</span>" : "")
						+ "</td><td>"+result.outConsideration[key]['course']+"</td><td>"+result.outConsideration[key]['semester']+"</td><td>"+result.outConsideration[key]['letter']+"</td></tr>";
					}
					receipt += "</table></td></tr></table>"

					var adder = "<div id='manual-add-div'>"
						+ "<p><span class='new'>NEW</span>Add a fictional course:</p>"
						+ "<input id='add-coursecode' type='text' maxlength='8' width='7' placeholder='An alias...'/>"
						+ "<select id='add-credits'>";
					for (var i of [1,3,4]) {
						adder += "<option"+(i==3 ? " selected": "")+">"+i+"</option>";
					}
					adder += "</select><select id='add-grade'>";

					for (var key in lookup) {
						adder += "<option>"+key+"</option>";
						if (key == "F") break;
					}
					adder += "</select><button class='add-new-button'>ADD</button></div>";
					receipt += adder;

					$('#receipt').html(receipt);
					$('#receipt-container').show();
					$(document).on("click",".rmbtn",function() {
						var e = $(this).parents("tr").first();
						var key = e.data("key");
						result.outConsideration[key] = Object.create(result.inConsideration[key]);
						delete result.inConsideration[key];
						result = calculate(result);
						e.find(".addrmbtn").removeClass("rmbtn").addClass("addbtn").html("+");
						e.remove();
						$("#excluded").append(e.prop("outerHTML"));
						$(".gpa").html(result.gpa.toFixed(2));
					});
					$(document).on("click",".addbtn", function() {
						var e = $(this).parents("tr").first();
						var key = e.data("key");
						result.inConsideration[key] = Object.create(result.outConsideration[key]);
						delete result.outConsideration[key];
						result = calculate(result);
						e.find(".addrmbtn").removeClass("addbtn").addClass("rmbtn").html("-");
						e.remove();
						$("#included").append(e.prop("outerHTML"));
						$(".gpa").html(result.gpa.toFixed(2));
					});
					$(document).on("click",".add-new-button", function() {
						//var e = $(this).parents("tr").first();
						var key = Object.keys(result.inConsideration).length + Object.keys(result.outConsideration).length;
						result.inConsideration[key] = Object.create({'course': $('#add-coursecode').val(), 'letter':$('#add-grade option:selected').val(),'grade':lookup[$('#add-grade option:selected').val()],'credits':parseFloat($('#add-credits option:selected').val()), 'semester':'----'});
						//delete result.outConsideration[key];
						result = calculate(result);
						//e.find(".addrmbtn").removeClass("addbtn").addClass("rmbtn").html("-");
						//e.remove();
						newrow = "<tr data-key='" + key + "'><td><span class='addrmbtn rmbtn'>-</span></td><td>"+result.inConsideration[key]['course']+"</td><td>"+result.inConsideration[key]['semester']+"</td><td>"+result.inConsideration[key]['letter']+"</td></tr>";
						$("#included").append(newrow);
						$(".gpa").html(result.gpa.toFixed(2));
					});
				} else {
					$("#result").html(
						"<span class='fail'>Oops. Something is not right."
						+ "<br> Either you pasted rubbish or it's me."
						+ "<br> If you think it's me, then please contact my coder.</span>"
						);
				}
				$("#gpa-info").val("PASTED!");
				setTimeout(function() {
					$("#gpa-info").trigger("blur");
				}, 1000);
			}, 0);
		});
		$("#gpa-info").bind("blur", function() {
			$("#gpa-info").val("");
		});
		$("#receipt-toggler").click(function() {
			$("#receipt-toggler").html(($("#receipt").css('display') == 'none' ? "Hide" : "Show") + " receipt");
			$("#receipt").animate({'height':'toggle'},800);
		});
	});
</script>
<style>
body
{
	font-family: Helvetica;
	font-size: 14pt;
}

a
{
	color: inherit;
	text-decoration: none;
}

#calc-wrapper
{
	width: 44%;
	margin: auto;
	color: #2c3e50;
}

#calc-container
{
	background-color: #cdd3d7;
	border-radius: 10px;
	padding: 10px 20px 20px 20px;
}

h1
{
	text-align: center;
}

ol
{
	width: 80%;
	padding:0;
	margin: auto;
}

ol>li
{
	width: 100%;
	margin: 10px 0;
}

.howto
{
	font-size: 14pt;
	text-decoration: underline;
}

.kusis
{
	background-color: #afd0f1;
	color: #416291;
	font-size: 10pt;
	padding: 0 3px 0 3px;
	border-radius: 2px;
}

.key
{
	background-color: #eee;
	color: #333;
	border:1px solid gray;
	font-size:8pt;
	box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
	margin:2px 3px;
	padding:1px 5px;
}
#gpa-info
{
	width: 100%;
	min-width: 100%;
	max-width: 100%;
	height: 40px;
	min-height: 40px;
	max-height: 40px;
	border: 3px solid #2c3e50;
	font-size: 20pt;
	margin: 30px 0 10px 0;
}

#gpa-info[placeholder] {
	color: #2c3e50;
}

#result
{
	width: 80%;
	text-align: center;
	vertical-align: center;
	font-weight: bold;
	background-color: #fff;
	border-radius: 15px;
	margin: 10px auto;
}

#result .success
{
	font-size: 24pt;
}

#result .gpa
{
	font-size: 36pt;
}

#result .fail
{
	font-size: 14pt;
}

#receipt-container
{
	display: none;
	margin: auto;
	width: 80%;
}

#receipt-toggler
{
	width: 100%;
	text-align: center;
	border-radius: 10px;
	cursor: pointer;
	font-size: 14pt;
	margin: auto;
}

#receipt-toggler:hover
{
	background-color: #eee;
}

#receipt
{
	display: none;
	color: inherit;
}

#both
{
	width: 100%;
}

#both td, th
{
	font-size: 8pt;
	width: 33%;
	vertical-align: top;
	text-align: center;
}

.receipt-table
{
	text-align: center;
	width: 100%;
	border-radius: 10px;
	background-color: #eee;
	color: inherit;
}

#receipt h2
{
	margin: 0;
}

.receipt-table th
{
	font-size: 12pt;
}

.receipt-table .addrmbtn
{
	display: inline-block;
	cursor: pointer;
	background-color: rgba(200,200,200,0.7);
	font-weight: bold;
	min-width: 10px;
	border-radius: 10px;
}

#calc-footer
{
	opacity: 0.6;
	font-size: 10pt;
	text-align: center;
	margin-top: 10px;
	font-style: italic;
}

#calc-footer p
{
	margin: 5px 0;
}


#calc-footer a
{
	color: #2c3e50;
	text-decoration: none;
}

#calc-footer a:hover
{
	text-decoration: underline;
}

.new
{
	font-size: 7pt;
	color: #eee;
	display: inline-block;
	padding: 2px;
	margin-right: 5px;
	position: relative;
	bottom: 5px;
	font-weight: bold;
	color: white;
	background-color: rgba(46, 204, 113,1.0);
	border-radius: 5px;
}

#manual-add-div
{
		text-align: center;
}

#manual-add-div p
{
		margin-bottom: 5px;
}

#add-coursecode
{
	width: 8em;
}

@media all and (max-width: 768px) {
	#calc-wrapper
	{
		width: 96%;
	}
}

</style>
</head>
<body>
	<div id="calc-wrapper">
		<h1>KUSIS GPA Calculator</h1>
		<div id="calc-container">
			<ol>
				<span class="howto">How to use:</span>
				<li>Login to <a href="https://kusis.ku.edu.tr" target="blank">KUSIS</a> in <u>English</u> and navigate to <br><span class="kusis">Self Service > Academic Records > My Course History</span></li>
				<li>Copy the page content by <span class="key">CTRL</span>+<span class="key">A</span> then <span class="key">CTRL</span>+<span class="key">C</span></span></li>
				<li>
					Paste it with <span class="key">CTRL</span>+<span class="key">V</span> into the field below
					<textarea name="gpa-info" id="gpa-info" cols="30" rows="1" placeholder="PASTE HERE!"></textarea>
				</li>
				<li>
					See the receipt and exclude courses!
				</li>
				<li>
					<span class='new'>NEW</span>Add fictional courses to your transcript!
				</li>
			</ol>
			<div id="result"></div>
			<div id="receipt-container">
				<div id="receipt-toggler">Show receipt</div>
				<div id="receipt"></div>
			</div>
		</div>
		<div id="calc-footer">
			<p>Primarily tested on <a href="https://www.mozilla.org/en-US/firefox/new/">Mozilla Firefox</a></p>
			<p>Source is also available at <a href="https://gist.github.com/atilberk/d5eb06bb6b80ac9516ba">GitHub</a></p>
		</div>
	</div>
</body>
</html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>KUSIS GPA Calculator</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
	<script type="text/javascript">

	var cues = {
	"Course Description Term Grade Units Status Incl GPA":'Chrome',
	"Course Description Term Grade Units Status Incl GPA":'Firefox',
	"CourseDescriptionTermGradeUnitsStatusInclGPA":'Nospace'
	};
	var lookup = {
	'A+':4.3,
	'A':4.,
	'A-':3.7,
	'B+':3.3,
	'B':3.,
	'B-':2.7,
	'C+':2.3,
	'C':2.,
	'C-':1.7,
	'D+':1.3,
	'D':1.,
	'F':0.,
	'S':0.,
	'U':0.,
	'W':0.,
	'I':0.,
	'AU':0.,
	'T':0.,
	'AP':0.,
	'NA':0.,
	'':0.
	}
	var statuses = {
	"Taken":"",
	"InProgress":"",
	"Transferred":""
	};
	var result = {'gpa':0., 'inConsideration': {}, 'outConsideration': {}};

	function isValidInput(candidateInput) {
	var candidates = candidateInput.split('\n');
	var lines = [];
	for (var i=0;i<candidates.length;i++) {
	//if (candidates[i].replace(/\t/g,'').length > 0) {
	if (candidates[i].replace(/\t/g,'').length > 0 && isLetterOrDigitOrSpace(candidates[i][0])) {
	lines.push(candidates[i]);
	}
	}
	for (var i=0;i<lines.length;i++) {
	if (lines[i].replace(/ \|\t/g,'') in cues) {
	return (i+7 < lines.length && lines[i+4] in lookup && /^[0-9]+.00$/.test(lines[i+5]));
	}
	}
	return false;
	}

	function preprocessInput(rawInput) {
	var candidates = rawInput.split('\n');
	var lines = [];
	for (var i=0;i<candidates.length;i++) {
	if (!(candidates[i].replace(/ \|\t/g,'') in statuses) && candidates[i].replace(/\t/g,'').length > 0 && isLetterOrDigitOrSpace(candidates[i][0])) {
	lines.push(candidates[i]);
	}
	}
	var i;
	for (i=0;i<lines.length;i++) {
	if (lines[i].replace(/ \|\t/g,'') in cues) {
	i++;
	break;
	}
	}
	var input = {'inConsideration':{},'outConsideration':{}};
	var key = 0
	while (i < lines.length && lines[i+3] !== undefined && lines[i+3].trim() in lookup && /^[0-9]+.00$/.test(lines[i+4])) {
	var semester = lines[i+2].split(' ')[0].substring(0,2).toUpperCase() + "'" + lines[i+2].split(' ')[1].substring(2);
	if ((lines[i].split(' ')[0] != 'ELC') && // If the course code does not start with ELC
	( !(lines[i] in courseNameSet(input.inConsideration)) \|\| (lookup[lines[i+3].trim()] > getObjFromCourse(input.inConsideration,lines[i])['grade']) ) // couse is not taken yet, if taken before, check if the grade is better
	) {
	if (lines[i] in courseNameSet(input.inConsideration)) {
	ckey = getKey(input.inConsideration, lines[i]);
	input.outConsideration[ckey] = Object.create(input.inConsideration[ckey]);
	delete input.inConsideration[ckey];
	}
	input.inConsideration[key+""] = {'course': lines[i], 'letter':lines[i+3],'grade':lookup[lines[i+3].trim()],'credits':parseFloat(lines[i+4]), 'semester':semester};
	key++;
	} else {
	input.outConsideration[key+""] = {'course': lines[i], 'letter':lines[i+3],'grade':lookup[lines[i+3].trim()],'credits':parseFloat(lines[i+4]), 'semester':semester};
	key++;
	}
	i+=6;
	}
	return input;
	}

	function calculate(input) {
	var sumGrades = 0.;
	var sumCredits = 0.;
	var onCalc = {};
	var offCalc = input.outConsideration;
	for (var key in input.inConsideration) {
	if (input.inConsideration[key]['letter'] == 'F' \|\| input.inConsideration[key]['grade'] != 0.) {
	sumGrades += input.inConsideration[key]['grade'] * input.inConsideration[key]['credits'];
	sumCredits += input.inConsideration[key]['credits'];
	onCalc[key] = input.inConsideration[key];
	} else {
	offCalc[key] = input.inConsideration[key];
	}
	}
	return {'gpa':sumGrades / sumCredits, 'inConsideration':onCalc, 'outConsideration': offCalc};
	}

	function courseNameSet(courseObjSet) {
	var set = {};
	for (var key in courseObjSet) {
	set[(courseObjSet[key].course)] = 0;
	}
	return set;
	}

	function getKey(set,courseName) {
	for (var key in set) {
	if (set[key].course == courseName) {
	return key;
	}
	}
	return "nokey";
	}

	// returns the course with courseName, the one with the highest grade if multiple
	function getObjFromCourse(set,courseName) {
	grade = -1.;
	element = null;
	for (var key in set) {
	e = set[key];
	if (e.course == courseName) {
	g = e.grade;
	if (grade < g) {
	grade = g;
	element = e;
	}
	}
	}
	return e;
	}

	function isLetterOrDigitOrSpace(str) {
	return str.length === 1 && str.match(/[\sa-z0-9]/i) != null;
	}

	$(document).ready(function() {
	$("#gpa-info").bind("paste", function() {
	setTimeout(function() {
	var inputText = $("#gpa-info").val();
	if(isValidInput(inputText)) {
	var input = preprocessInput(inputText);
	result = calculate(input);
	$("#result").html(
	"<span class='success'>Your GPA is "
	+ "<span class='gpa'>"+result.gpa.toFixed(2)+"</span></span>"
	);
	var receipt = "<table id='both'><tr><td><h2>Courses included:</h2></td><td><h2>Courses excluded:</h2></td></tr>"
	+"<tr><td><table class='receipt-table' id='included'><tr><th></th><th>Course</th><th>Semester</th><th>Letter</th></tr>";
	for(var key in result.inConsideration) {
	receipt += "<tr data-key='" + key + "'><td><span class='addrmbtn rmbtn'>-</span></td><td>"+result.inConsideration[key]['course']+"</td><td>"+result.inConsideration[key]['semester']+"</td><td>"+result.inConsideration[key]['letter']+"</td></tr>";
	}
	receipt += "</table></td>"
	+"<td><table class='receipt-table' id='excluded'><tr><th></th><th>Course</th><th>Semester</th><th>Letter</th></tr>"
	for(var key in result.outConsideration) {
	receipt += "<tr data-key='" + key + "'><td>"
	+ ((result.outConsideration[key]['grade'] > 0. \|\| result.outConsideration[key]['letter'] == 'F' ) ? "<span class='addrmbtn addbtn'>+</span>" : "")
	+ "</td><td>"+result.outConsideration[key]['course']+"</td><td>"+result.outConsideration[key]['semester']+"</td><td>"+result.outConsideration[key]['letter']+"</td></tr>";
	}
	receipt += "</table></td></tr></table>"

	var adder = "<div id='manual-add-div'>"
	+ "<p><span class='new'>NEW</span>Add a fictional course:</p>"
	+ "<input id='add-coursecode' type='text' maxlength='8' width='7' placeholder='An alias...'/>"
	+ "<select id='add-credits'>";
	for (var i of [1,3,4]) {
	adder += "<option"+(i==3 ? " selected": "")+">"+i+"</option>";
	}
	adder += "</select><select id='add-grade'>";

	for (var key in lookup) {
	adder += "<option>"+key+"</option>";
	if (key == "F") break;
	}
	adder += "</select><button class='add-new-button'>ADD</button></div>";
	receipt += adder;

	$('#receipt').html(receipt);
	$('#receipt-container').show();
	$(document).on("click",".rmbtn",function() {
	var e = $(this).parents("tr").first();
	var key = e.data("key");
	result.outConsideration[key] = Object.create(result.inConsideration[key]);
	delete result.inConsideration[key];
	result = calculate(result);
	e.find(".addrmbtn").removeClass("rmbtn").addClass("addbtn").html("+");
	e.remove();
	$("#excluded").append(e.prop("outerHTML"));
	$(".gpa").html(result.gpa.toFixed(2));
	});
	$(document).on("click",".addbtn", function() {
	var e = $(this).parents("tr").first();
	var key = e.data("key");
	result.inConsideration[key] = Object.create(result.outConsideration[key]);
	delete result.outConsideration[key];
	result = calculate(result);
	e.find(".addrmbtn").removeClass("addbtn").addClass("rmbtn").html("-");
	e.remove();
	$("#included").append(e.prop("outerHTML"));
	$(".gpa").html(result.gpa.toFixed(2));
	});
	$(document).on("click",".add-new-button", function() {
	//var e = $(this).parents("tr").first();
	var key = Object.keys(result.inConsideration).length + Object.keys(result.outConsideration).length;
	result.inConsideration[key] = Object.create({'course': $('#add-coursecode').val(), 'letter':$('#add-grade option:selected').val(),'grade':lookup[$('#add-grade option:selected').val()],'credits':parseFloat($('#add-credits option:selected').val()), 'semester':'----'});
	//delete result.outConsideration[key];
	result = calculate(result);
	//e.find(".addrmbtn").removeClass("addbtn").addClass("rmbtn").html("-");
	//e.remove();
	newrow = "<tr data-key='" + key + "'><td><span class='addrmbtn rmbtn'>-</span></td><td>"+result.inConsideration[key]['course']+"</td><td>"+result.inConsideration[key]['semester']+"</td><td>"+result.inConsideration[key]['letter']+"</td></tr>";
	$("#included").append(newrow);
	$(".gpa").html(result.gpa.toFixed(2));
	});
	} else {
	$("#result").html(
	"<span class='fail'>Oops. Something is not right."
	+ "<br> Either you pasted rubbish or it's me."
	+ "<br> If you think it's me, then please contact my coder.</span>"
	);
	}
	$("#gpa-info").val("PASTED!");
	setTimeout(function() {
	$("#gpa-info").trigger("blur");
	}, 1000);
	}, 0);
	});
	$("#gpa-info").bind("blur", function() {
	$("#gpa-info").val("");
	});
	$("#receipt-toggler").click(function() {
	$("#receipt-toggler").html(($("#receipt").css('display') == 'none' ? "Hide" : "Show") + " receipt");
	$("#receipt").animate({'height':'toggle'},800);
	});
	});
	</script>
	<style>
	body
	{
	font-family: Helvetica;
	font-size: 14pt;
	}

	a
	{
	color: inherit;
	text-decoration: none;
	}

	#calc-wrapper
	{
	width: 44%;
	margin: auto;
	color: #2c3e50;
	}

	#calc-container
	{
	background-color: #cdd3d7;
	border-radius: 10px;
	padding: 10px 20px 20px 20px;
	}

	h1
	{
	text-align: center;
	}

	ol
	{
	width: 80%;
	padding:0;
	margin: auto;
	}

	ol>li
	{
	width: 100%;
	margin: 10px 0;
	}

	.howto
	{
	font-size: 14pt;
	text-decoration: underline;
	}

	.kusis
	{
	background-color: #afd0f1;
	color: #416291;
	font-size: 10pt;
	padding: 0 3px 0 3px;
	border-radius: 2px;
	}

	.key
	{
	background-color: #eee;
	color: #333;
	border:1px solid gray;
	font-size:8pt;
	box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
	margin:2px 3px;
	padding:1px 5px;
	}
	#gpa-info
	{
	width: 100%;
	min-width: 100%;
	max-width: 100%;
	height: 40px;
	min-height: 40px;
	max-height: 40px;
	border: 3px solid #2c3e50;
	font-size: 20pt;
	margin: 30px 0 10px 0;
	}

	#gpa-info[placeholder] {
	color: #2c3e50;
	}

	#result
	{
	width: 80%;
	text-align: center;
	vertical-align: center;
	font-weight: bold;
	background-color: #fff;
	border-radius: 15px;
	margin: 10px auto;
	}

	#result .success
	{
	font-size: 24pt;
	}

	#result .gpa
	{
	font-size: 36pt;
	}

	#result .fail
	{
	font-size: 14pt;
	}

	#receipt-container
	{
	display: none;
	margin: auto;
	width: 80%;
	}

	#receipt-toggler
	{
	width: 100%;
	text-align: center;
	border-radius: 10px;
	cursor: pointer;
	font-size: 14pt;
	margin: auto;
	}

	#receipt-toggler:hover
	{
	background-color: #eee;
	}

	#receipt
	{
	display: none;
	color: inherit;
	}

	#both
	{
	width: 100%;
	}

	#both td, th
	{
	font-size: 8pt;
	width: 33%;
	vertical-align: top;
	text-align: center;
	}

	.receipt-table
	{
	text-align: center;
	width: 100%;
	border-radius: 10px;
	background-color: #eee;
	color: inherit;
	}

	#receipt h2
	{
	margin: 0;
	}

	.receipt-table th
	{
	font-size: 12pt;
	}

	.receipt-table .addrmbtn
	{
	display: inline-block;
	cursor: pointer;
	background-color: rgba(200,200,200,0.7);
	font-weight: bold;
	min-width: 10px;
	border-radius: 10px;
	}

	#calc-footer
	{
	opacity: 0.6;
	font-size: 10pt;
	text-align: center;
	margin-top: 10px;
	font-style: italic;
	}

	#calc-footer p
	{
	margin: 5px 0;
	}


	#calc-footer a
	{
	color: #2c3e50;
	text-decoration: none;
	}

	#calc-footer a:hover
	{
	text-decoration: underline;
	}

	.new
	{
	font-size: 7pt;
	color: #eee;
	display: inline-block;
	padding: 2px;
	margin-right: 5px;
	position: relative;
	bottom: 5px;
	font-weight: bold;
	color: white;
	background-color: rgba(46, 204, 113,1.0);
	border-radius: 5px;
	}

	#manual-add-div
	{
	text-align: center;
	}

	#manual-add-div p
	{
	margin-bottom: 5px;
	}

	#add-coursecode
	{
	width: 8em;
	}

	@media all and (max-width: 768px) {
	#calc-wrapper
	{
	width: 96%;
	}
	}

	</style>
	</head>
	<body>
	<div id="calc-wrapper">
	<h1>KUSIS GPA Calculator</h1>
	<div id="calc-container">
	<ol>
	<span class="howto">How to use:</span>
	<li>Login to <a href="https://kusis.ku.edu.tr" target="blank">KUSIS</a> in <u>English</u> and navigate to <br><span class="kusis">Self Service > Academic Records > My Course History</span></li>
	<li>Copy the page content by <span class="key">CTRL</span>+<span class="key">A</span> then <span class="key">CTRL</span>+<span class="key">C</span></span></li>
	<li>
	Paste it with <span class="key">CTRL</span>+<span class="key">V</span> into the field below
	<textarea name="gpa-info" id="gpa-info" cols="30" rows="1" placeholder="PASTE HERE!"></textarea>
	</li>
	<li>
	See the receipt and exclude courses!
	</li>
	<li>
	<span class='new'>NEW</span>Add fictional courses to your transcript!
	</li>
	</ol>
	<div id="result"></div>
	<div id="receipt-container">
	<div id="receipt-toggler">Show receipt</div>
	<div id="receipt"></div>
	</div>
	</div>
	<div id="calc-footer">
	<p>Primarily tested on <a href="https://www.mozilla.org/en-US/firefox/new/">Mozilla Firefox</a></p>
	<p>Source is also available at <a href="https://gist.github.com/atilberk/d5eb06bb6b80ac9516ba">GitHub</a></p>
	</div>
	</div>
	</body>
	</html>