Build a Credit-Weighted GPA Calculator in JavaScript

A GPA calculator looks simple until courses have different credit values. Averaging the grade points directly gives every course the same influence, which is not the calculation we want for a credit-weighted GPA.

This tutorial builds a small, framework-independent calculation function for a 4.0 scale. It accepts course credits and grade points, rejects incomplete inputs and keeps rounding separate from the calculation.

Start with a worked example

Consider these illustrative courses:

Course	Credits	Grade points	Quality points
Mathematics	4	4.0	16
Programming	3	3.0	9
Lab	1	2.0	2
Total	8	—	27

Multiply each course's credits by its grade points, add those products, then divide by the total included credits:

Weighted GPA = total quality points / total included credits
             = 27 / 8
             = 3.375

For a two-decimal display, this example becomes 3.38. An unweighted average of the three grade-point values would be 3.00, so the choice of method makes a visible difference.

Validate before calculating

Form inputs often arrive as strings. Converting them without checking for missing values can hide a problem: Number("") evaluates to zero.

For this example, the rules are:

• Accept finite numbers and nonblank numeric strings.
• Require positive course credits.
• Accept grade points from zero to four, including zero.
• Reject an empty course list and incomplete course rows.
• Reject arithmetic overflow rather than displaying an invalid result.

A zero grade is valid in this model. If a failed course carries credits and its grade point is zero, those credits stay in the denominator. A course that your institution excludes from GPA should be omitted according to that institution's policy.

Implement the calculation

function readNumber(value, label) {
  const validType = typeof value === "number" || typeof value === "string";
  if (!validType || (typeof value === "string" && value.trim() === "")) {
    throw new Error(`${label} is required.`);
  }

  const number = Number(value);
  if (!Number.isFinite(number)) {
    throw new Error(`${label} must be a finite number.`);
  }
  return number;
}

function calculateGpa(courses) {
  if (!Array.isArray(courses) || courses.length === 0) {
    throw new Error("Add at least one course.");
  }

  let totalCredits = 0;
  let qualityPoints = 0;

  for (const [index, course] of courses.entries()) {
    if (!course || typeof course !== "object" || Array.isArray(course)) {
      throw new Error(`Course ${index + 1} is invalid.`);
    }

    const credits = readNumber(course.credits, `Course ${index + 1} credits`);
    const grade = readNumber(course.grade, `Course ${index + 1} grade`);

    if (credits <= 0) throw new Error("Credits must be greater than zero.");
    if (grade < 0 || grade > 4) throw new Error("Grade points must be between 0 and 4.");

    totalCredits += credits;
    qualityPoints += credits * grade;
  }

  if (!Number.isFinite(totalCredits) || !Number.isFinite(qualityPoints)) {
    throw new Error("The entered values are too large to calculate safely.");
  }

  return { totalCredits, qualityPoints, gpa: qualityPoints / totalCredits };
}

const courses = [
  { name: "Mathematics", credits: 4, grade: 4 },
  { name: "Programming", credits: 3, grade: 3 },
  { name: "Lab", credits: 1, grade: 2 },
];

const result = calculateGpa(courses);
console.log(result.gpa);            // 3.375
console.log(result.gpa.toFixed(2)); // "3.38"

The function returns the unrounded GPA and both totals. That makes the result easier to explain in a UI and allows later calculations to use the underlying value instead of a formatted string.

If you need a refresher on finite-number checks, see Number.isFinite() on MDN.

Check cases that can silently produce a wrong answer

Run the following checks in Node.js, after the function above. They cover unequal credits, zero grades, numeric strings and invalid inputs.

import assert from "node:assert/strict";

assert.equal(calculateGpa(courses).gpa, 3.375);
assert.equal(calculateGpa([{ credits: 3, grade: 4 }, { credits: 3, grade: 0 }]).gpa, 2);
assert.equal(calculateGpa([{ credits: "3", grade: "4" }]).gpa, 4);
assert.equal(calculateGpa([{ credits: 0.5, grade: 0 }]).gpa, 0);

assert.throws(() => calculateGpa([]));
assert.throws(() => calculateGpa([{ credits: "", grade: 4 }]));
assert.throws(() => calculateGpa([{ credits: 3, grade: " " }]));
assert.throws(() => calculateGpa([{ credits: 0, grade: 4 }]));
assert.throws(() => calculateGpa([{ credits: -1, grade: 4 }]));
assert.throws(() => calculateGpa([{ credits: 3, grade: 4.5 }]));
assert.throws(() => calculateGpa([{ credits: 3, grade: -1 }]));
assert.throws(() => calculateGpa([{ credits: Infinity, grade: 4 }]));
assert.throws(() => calculateGpa([{ credits: null, grade: 4 }]));
assert.throws(() => calculateGpa([{ credits: true, grade: 4 }]));
assert.throws(() => calculateGpa([null]));
assert.throws(() => calculateGpa([{ credits: Number.MAX_VALUE, grade: 4 }]));

console.log("All 16 GPA checks passed.");

Connect it to a user interface

Keep this calculation layer separate from input rendering. On submission, gather the included course rows, call calculateGpa() and show either the result or the validation message.

Give credits and grade-point fields visible labels. Keep entered values when validation fails, and make the error easy to locate. In a React interface, this function can be called from a submit handler; the function itself does not depend on React.

State the limits of the model

This example uses an already-selected 4.0 grade-point scale. It does not convert percentages or international credentials, and it does not infer rules for repeated courses, pass/fail subjects or excluded credits.

Use the institution's own grade mapping and inclusion policy before adapting the example for a real transcript. Formatting a result to two decimals is a display decision, not a universal university rounding rule.

Disclosure: This tutorial and its cover image were created with AI assistance. The JavaScript examples were executed with automated checks.