# Simple GPA Calculator In Javascript (Free Source Code)

Welcome to a tutorial on how to create a GPA calculator using Javascript. Yep, this is kind of weird as a tutorial. Did some twisted lecturer ask to create a GPA calculator as an assignment? Or maybe you are just curious about how to create one? Either way, let us walk through a simple Javascript GPA calculator in this guide – Read on!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in. ### QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

## GPA BASICS & DEMO Before we start with the script, let us go through what GPA stands for… Not going to judge those who don’t know, everyone has to start somewhere.

### WHAT IS GPA? HOW IS IT CALCULATED?

GPA stands for Grade Point Average, and how it works is very simple. For example, every grade will have a number of points given:

 Grade Points Distinction 5 A 4 B 3 C 2 D 1 F 0

So if someone took 3 subjects and scored `A, B, C` respectively, which will be a total of `4 + 3 + 2 = 9` points. The GPA will be `9 points ÷ 3 subjects = 3`. Easy enough? But take note that every school will have a different grading system.

For example, some may not have a “distinction” grade, and some may require a certain number of subject passes regardless of the GPA – This guide will only walk through a basic calculator, you add the rest of the “complicated rules”.

Total Points: 0
GPA: 0

## GPA CALCULATOR All right, let us now get on with more details on how the Javascript GPA calculator works.

### PART 1) THE HTML

1-gpa.html
``````<div id="gpa-wrap"></div>
<div>Total Points: <span id="gpa-total">0</span></div>
<div>GPA: <span id="gpa-average">0</span></div>``````
• `<div id="gpa-wrap">` We will use Javascript to generate the GPA table in this wrapper.
• `<span id="gpa-total">` Total points.
• `<span id="gpa-average">` GPA.

### PART 2) THE JAVASCRIPT

#### 2A) SCORES & SUBJECTS

2-gpa.js
``````// (A) SCORE SHEET & SUBJECTS
var scores = {
Distinction: 5,
A: 4, B: 3, C: 2, D: 1, F: 0
};
var subjects = [
"Subject A", "Subject B", "Subject C", "Subject D"
];``````

Yep, every school and course is different. So set your own scores, points, and subjects first.

#### 2B) DRAW THE HTML

2-gpa.js
``````<script>
// (B) DRAW HTML
// (B1) GET HTML ELEMENTS
let wrapper = document.getElementById("gpa-wrap"),
table = document.createElement("table");

// (B2) CREATE HTML GPA TABLE
let row = table.insertRow(),
cell = null, selector = null, option = null;
for (let s of subjects) {
cell = row.insertCell();
cell.innerHTML = s;
cell = row.insertCell();
selector = document.createElement("select");
cell.appendChild(selector);
for (let grade in scores) {
option = document.createElement("option");
selector.appendChild(option);
selector.onchange = gpacalc;
}
row = table.insertRow();
}
wrapper.appendChild(table);
gpacalc();
});``````

On window load, this “complicated” section will run. No need to panic, it is simply running through `var subjects` and `var scores` to generate an HTML table and respective grade selectors.

2-gpa.js
``````// (C) CALCULATE FUNCTION
var gpacalc = () => {
let all = document.querySelectorAll("#gpa-wrap select"),
score = 0;
for (let i of all) {
// use parseFloat if decimals are involved.
score += parseInt(i.value);
}
document.getElementById("gpa-total").innerHTML = score;
document.getElementById("gpa-average").innerHTML = score / all.length;
};``````

One final step, `gpacalc()` is called whenever a grade `<select>` is changed. Very simple function, just grabs all the grades and calculates the GPA.

### PART 3) CSS COSMETICS

3-gpa.css
``````* {
font-family: Arial, Helvetica, sans-serif;
box-sizing: border-box;
}
#gpa-wrap table {
border-collapse: collapse;
margin-bottom: 10px;
}
#gpa-wrap table tr:nth-child(odd) { background: #f2f2f2; }
#gpa-wrap table tr td { padding: 10px; }``````

Not important… Just some CSS cosmetics to make things look a little better. That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

## THE END Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

### 2 thoughts on “Simple GPA Calculator In Javascript (Free Source Code)”

1. Hi, great GPA calculator which I would like to use. I wonder if there is a possibility to use decimals as well since we have 5 grades in Sweden like A:20, B:17.5, C:15, D:12.5, E:10

// (A) SCORE SHEET & SUBJECTS
var scores = {
Distinction: 5,
A: 20, B: 17.5, C: 15, D: 12.5, E: 10
};
var subjects = [
“Subject A”, “Subject B”, “Subject C”, “Subject D”
];