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

Download & Notes Basics & Demo GPA Calculator
Useful Bits & Links The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

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.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer 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, that 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

Total Points: 0
GPA: 0

 

 

GPA CALCULATOR

All right, let us now get on with how to create a Javascript GPA calculator.

 

1) START WITH THE DATA

gps-js.html
<script>
// (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"
];
</script>

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

 

2) DRAW THE HTML

gps-js.html
<script>
// (B) DRAW HTML
window.addEventListener("load", function(){
  let wrapper = document.getElementById("gpa-wrap"),
      table = document.createElement("table"),
      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();
});
</script>

<!-- (B) 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>

The HTML here should be pretty straightforward:

  • All the subjects and scores will be generated with Javascript into <div id="gpa-wrap">.
  • <span id="gpa-total"> is the total points.
  • <span id="gpa-average"> is the GPA itself.

As for the Javascript itself – It is simply running through var subjects and var scores to generate an HTML table and respective grade selectors.

 

 

3) GRADE CALCULATION

gps-js.html
// (C) CALCULATE FUNCTION
var gpacalc = function(){
  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;
};

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

 

EXTRA) CSS COSMETICS

gps-js.html
<style>
  #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;
  }
</style>

Just some bits to make things look a little better.

 

 

USEFUL BITS & LINKS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

 

LINKS & REFERENCES

 

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!

Leave a Comment

Your email address will not be published. Required fields are marked *