Skip to content

Instantly share code, notes, and snippets.

@sanvishal

sanvishal/GPA calculator.html

Created June 8, 2018 11:50
Show Gist options
  • Save sanvishal/cc016d9ab45e4f7028abd0311e090767 to your computer and use it in GitHub Desktop.
Save sanvishal/cc016d9ab45e4f7028abd0311e090767 to your computer and use it in GitHub Desktop.
Download ZIP
Anna university semester - 2(reg - 2017) GPA calculator
Raw
GPA calculator.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>GPA CALCULATOR</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Quicksand:300,500" rel="stylesheet">
</head>
<style>
body {
border: 5px solid;
border-color: #f0f0f0;
}
.l {
margin: auto;
width: 75%;
animation-name: enlarge;
animation-timing-function: ease-out;
animation-duration: 1s;
border-style: solid;
opacity: 50%;
border-width: 2px;
border-bottom-right-radius: 50px;
border-top-right-radius: 50px;
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
color: rgba(220, 61, 36, 0.8);
}
@keyframes enlarge {
from {
width: 0%
}
to {
width: 75%
}
}
.jumbotron {
background-color: #ffffff;
color: #DC3D24;
font-weight: 1000; //border-bottom-style: solid;
}
body {
font-family: 'Quicksand', sans-serif;
font-weight: 500; //background-color: #f1f1f1;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 500;
}
.table {
width: 75%;
margin: auto;
color: #000000;
}
.change {
font-size: 20px;
}
</style>
<body>
<div class="container text-center jumbotron">
<h1>
GPA CALCULATOR
</h1>
<i><h4>~made by Vishal TK (ECE B Velammal IT)~</i></h4>
</div>
<div class="l"></div>
<br>
<div class="container text-center change">
<b>Change Department : </b>
<div class="btn-group">
<button type="button" class="btn btn-primary" id="ECE">ECE</button>
<button type="button" class="btn btn-primary" id="CSE">CSE</button>
</div>
<br>
</div>
<div class="container text-center">
<table class="table table-hover">
<thead>
<tr>
<th>
<center>Subjects</center>
</th>
<th>
<center>Grades</center>
</th>
</tr>
</thead>
<tbody>
<tr id="s1">
<td class="s">Technical English</td>
<td>
<div class="dropdown">
<button class="btn btn-info dropdown-toggle sub1" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Select Grade
<span class="caret"></span>
</button>
<ul class="dropdown-menu text-center" aria-labelledby="dropdownMenu1">
<li><a href="#!" data-value="O">O</a></li>
<li><a href="#!" data-value="A+">A+</a></li>
<li><a href="#!" data-value="A">A</a></li>
<li><a href="#!" data-value="B+">B+</a></li>
<li><a href="#!" data-value="B">B</a></li>
</ul>
</div>
</td>
</tr>
<tr id="s2">
<td class="s">
Engineering Maths - II
</td>
<td>
<div class="dropdown">
<button class="btn btn-info dropdown-toggle sub2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Select Grade
<span class="caret"></span>
</button>
<ul class="dropdown-menu text-center" aria-labelledby="dropdownMenu1">
<li><a href="#!" data-value="O">O</a></li>
<li><a href="#!" data-value="A+">A+</a></li>
<li><a href="#!" data-value="A">A</a></li>
<li><a href="#!" data-value="B+">B+</a></li>
<li><a href="#!" data-value="B">B</a></li>
</ul>
</div>
</td>
</tr id="s3">
<tr>
<td class="s">
Physics for Electronics Engineering
</td>
<td>
<div class="dropdown">
<button class="btn btn-info dropdown-toggle sub3" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Select Grade
<span class="caret"></span>
</button>
<ul class="dropdown-menu text-center" aria-labelledby="dropdownMenu1">
<li><a href="#!" data-value="O">O</a></li>
<li><a href="#!" data-value="A+">A+</a></li>
<li><a href="#!" data-value="A">A</a></li>
<li><a href="#!" data-value="B+">B+</a></li>
<li><a href="#!" data-value="B">B</a></li>
</ul>
</div>
</td>
</tr>
<tr id="s4">
<td class="s"> Basic Electrical and Instrumentation Engineering </td>
<td>
<div class="dropdown">
<button class="btn btn-info dropdown-toggle sub4" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Select Grade
<span class="caret"></span>
</button>
<ul class="dropdown-menu text-center" aria-labelledby="dropdownMenu1">
<li><a href="#!" data-value="O">O</a></li>
<li><a href="#!" data-value="A+">A+</a></li>
<li><a href="#!" data-value="A">A</a></li>
<li><a href="#!" data-value="B+">B+</a></li>
<li><a href="#!" data-value="B">B</a></li>
</ul>
</div>
</td>
</tr>
<tr id="s5">
<td class="s">
Circuit Analysis
</td>
<td>
<div class="dropdown">
<button class="btn btn-info dropdown-toggle sub5" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Select Grade
<span class="caret"></span>
</button>
<ul class="dropdown-menu text-center" aria-labelledby="dropdownMenu1">
<li><a href="#!" data-value="O">O</a></li>
<li><a href="#!" data-value="A+">A+</a></li>
<li><a href="#!" data-value="A">A</a></li>
<li><a href="#!" data-value="B+">B+</a></li>
<li><a href="#!" data-value="B">B</a></li>
</ul>
</div>
</td>
</tr>
<tr id="s6">
<td class="s">
Electronic devices
</td>
<td>
<div class="dropdown">
<button class="btn btn-info dropdown-toggle sub6" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Select Grade
<span class="caret"></span>
</button>
<ul class="dropdown-menu text-center" aria-labelledby="dropdownMenu1">
<li><a href="#!" data-value="O">O</a></li>
<li><a href="#!" data-value="A+">A+</a></li>
<li><a href="#!" data-value="A">A</a></li>
<li><a href="#!" data-value="B+">B+</a></li>
<li><a href="#!" data-value="B">B</a></li>
</ul>
</div>
</td>
</tr>
<tr id="s7">
<td class="s">
Circuits and Devices Lab
</td>
<td>
<div class="dropdown">
<button class="btn btn-info dropdown-toggle sub7" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Select Grade
<span class="caret"></span>
</button>
<ul class="dropdown-menu text-center" aria-labelledby="dropdownMenu1">
<li><a href="#!" data-value="O">O</a></li>
<li><a href="#!" data-value="A+">A+</a></li>
<li><a href="#!" data-value="A">A</a></li>
<li><a href="#!" data-value="B+">B+</a></li>
<li><a href="#!" data-value="B">B</a></li>
</ul>
</div>
</td>
</tr>
<tr id="s8">
<td class="s">Engineering Practices Lab</td>
<td>
<div class="dropdown">
<button class="btn btn-info dropdown-toggle sub8" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Select Grade
<span class="caret"></span>
</button>
<ul class="dropdown-menu text-center" aria-labelledby="dropdownMenu1">
<li><a href="#!" data-value="O">O</a></li>
<li><a href="#!" data-value="A+">A+</a></li>
<li><a href="#!" data-value="A">A</a></li>
<li><a href="#!" data-value="B+">B+</a></li>
<li><a href="#!" data-value="B">B</a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
<br>
<button id="calc" type="submit" class="btn btn-primary btn-lg"> Submit </button>
<br><br>
<span class="badge badge-primary badge-lg"><h4 id = "GPA"></h4></span>
</div>
</body>
<script>
//setup with ece vars
document.addEventListener('DOMContentLoaded', function() {
changeece()
}, false);
//get the dropdown boxes to work
$(".dropdown-menu li a").click(function() {
$(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
$(this).parents(".dropdown").find('.btn').val($(this).data('value'));
});
//change dept trigger
document.getElementById("ECE").onclick = changeece;
document.getElementById("CSE").onclick = changecse;
gradepts = []
subjects = []
//change to cse
function changecse() {
subjects = ["Technical English", "Engineering Mathematics - II", "Physics for Information Science", "Basic Electrical,Electronics and Measurement Engineering", "Environmental Science and Engineering", "Programming in C", "Engineering Practices Laboratory", "C Programming Laboratory"]
gradepts = [4, 4, 3, 3, 3, 3, 2, 2]
for (i = 0; i < 8; i++) {
document.getElementsByClassName("s")[i].innerText = subjects[i]
}
}
//change to ece
function changeece() {
subjects = ["Technical English", "Engineering Mathematics - II", "Physics for Electronics Engineering", "Basic Electrical and Instrumentation Engineering", "Circuit Analysis", "Electronic devices", "Circuits and Devices Lab", "Engineering Practices Lab"]
gradepts = [4, 4, 3, 3, 4, 3, 2, 2]
for (i = 0; i < 8; i++) {
document.getElementsByClassName("s")[i].innerText = subjects[i]
}
}
//debug
/*document.addEventListener("click",function p() {
console.log(gradepts)
console.log(subjects)
})
*/
//parse grade to grade points(common)
var parser = {
"O": 10,
"A+": 9,
"A": 8,
"B+": 7,
"B": 6
}
//gather info and validate
function gatherinfo() {
var grades = []
for (i = 1; i <= 8; i++) {
grades.push(document.getElementsByClassName("sub" + String(i))[0].innerText.trim())
}
if (validate(grades)) {
gradeparsed = parse(grades)
var GPA = calculate(gradeparsed)
document.getElementById("GPA").innerText = "Your GPA is " + String(GPA)
} else {
window.alert("Please fill in all the details")
}
}
//activate on click submit btn
document.getElementById("calc").onclick = gatherinfo;
//validate the grades submitted
function validate(grd) {
for (i = 0; i < 8; i++) {
if (grd[i] == "Select Grade") {
return false
}
}
return true
}
//parse grades to grade points
function parse(grd) {
grades = []
for (i = 0; i < 8; i++) {
grades.push(parser[grd[i]])
}
return grades
}
//calculate GPA
function calculate(grd) {
var num = 0,
den = 0
for (i = 0; i < 8; i++) {
num += gradepts[i] * grd[i];
den += gradepts[i];
}
return num / den
}
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment