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.

 

 

TABLE OF CONTENTS

 

 

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.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

 

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”.

 

GPA CALCULATOR DEMO

 

 

 

PART 1) THE 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

// (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

<script>
// (B) DRAW HTML
window.addEventListener("load", () => {
  // (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");
      option.innerHTML = grade;
      option.value = scores[grade];
      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.

 

 

2C) GRADE CALCULATION

// (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

* {
  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.

 

 

 

LINKS & REFERENCES

• What is a GPA and Why Is It So Important? – Study Portals
• Cut & Paste GPA calculation program – JavaScript Kit