How to make a GPA Calculator as a beginner in HTML & JavaScript
Tags: webdev, javascript, beginners, html
Published: 2023-06-01 11:02:00

In this tutorial I will show you how to create an easy GPA calculator in HTML and JavaScript.

---

## Part One [HTML]:
In the `<body>` of your HTML file, add in an `<input>`, with the `id` of "input", and the `type` of text. On the next line, create a `<span>` with the `class` and `id` of "output". Next add a `<button>` with an `onmousedown` event. Type `calculate()` into the `onmousedown` event. Make the button say "Calculate". This button will run the JavaScript that gets what the output will be.

**_Cheat Sheet:_**
```
  <input type="text" id="input">
  <span class="output" id="output"></span>
  <button onmousedown="calculate()">Calculate</button>
```

---

## Part 2 [JavaScript]:
First, create a variable called `sum`. Do not set the value for this variable (it should look like this: `var sum;`). Next, create a variable called `numberOfGrades`, and set the value to `1`. The variable `numberOfGrades`, will be used to detect how many letter grades the user input. For example, if the user inputs `A+, B, B+`, then eventually we will make it so that the variable `numberOfGrades` will detect that the user input 3 letter grades.

After that, create a `function` called `calculate()`. It should look something like this: `function calculate(e){}`. In the curly brackets of this function, set the variable `numberOfGrades` to `1`. Then, set the variable `sum` to the value of our input box in HTML (This should look like this: `sum = document.getElementById('input').value;`). This means that the sum will look like the users input before anything is calculated. After you did all of that, add this code on the next line:

```
if(sum.includes('A+')){
    sum = sum.replaceAll('A+', '4.0')
  }
  if(sum.includes('A')){
    sum = sum.replaceAll('A', '4.0');
  }
  if(sum.includes('A-')){
    sum = sum.replaceAll('A-', '3.7');
  }
  if(sum.includes('B+')){
    sum = sum.replaceAll('B+', '3.3');
  }
  if(sum.includes('B')){
    sum = sum.replaceAll('B', '3.0');
  }
  if(sum.includes('B-')){
    sum = sum.replaceAll('B-', '2.7');
  }
  if(sum.includes('C+')){
    sum = sum.replaceAll('C+', '2.3');
  }
  if(sum.includes('C')){
    sum = sum.replaceAll('C', '2.0');
  }
  if(sum.includes('C-')){
    sum = sum.replaceAll('C-', '1.7');
  }
  if(sum.includes('D+')){
    sum = sum.replaceAll('D+', '1.3');
  }
  if(sum.includes('D')){
    sum = sum.replaceAll('D', '1.0');
  }
  if(sum.includes('D-')){
    sum = sum.replaceAll('D-', '0.7');
  }
  if  (sum.includes('F')){
    sum = sum.replaceAll('F', '0.0');
  }
```

What this code does is it replaces all of the letter grades in the `sum` variable with a grade point value. On the next line, you have to add the code:
```
while(sum.includes(',')){
    sum = sum.replace(',', '+');
    numberOfGrades++;
  }
```
This code is to replace all of the commas in the users input with plus signs. The `sum` variable's value will now look something like this: `4.0 + 3.0 + 3.7`. But as we know, `10.7` is not a GPA. That is why we have the variable `numberOfGrades`. In the `while` loop above, I made it so that `numberOfGrades`'s value increased by one every time it detected a comma.

Now what we do is average the GPA out. This math is really simple. All you have to do is set the `output` element's `innerHTML` to `(eval(sum) / numberOfGrades)`. The math equation above, divides the grades added together with the amount of grades originally. This gives you the Grade Point Average.

**_Cheat Sheet:_**

```
var sum;
var numberOfGrades = 1;
function calculate(e){
  numberOfGrades = 1;
  sum = document.getElementById('input').value;
  if(sum.includes('A+')){
    sum = sum.replaceAll('A+', '4.0')
  }
  if(sum.includes('A')){
    sum = sum.replaceAll('A', '4.0');
  }
  if(sum.includes('A-')){
    sum = sum.replaceAll('A-', '3.7');
  }
  if(sum.includes('B+')){
    sum = sum.replaceAll('B+', '3.3');
  }
  if(sum.includes('B')){
    sum = sum.replaceAll('B', '3.0');
  }
  if(sum.includes('B-')){
    sum = sum.replaceAll('B-', '2.7');
  }
  if(sum.includes('C+')){
    sum = sum.replaceAll('C+', '2.3');
  }
  if(sum.includes('C')){
    sum = sum.replaceAll('C', '2.0');
  }
  if(sum.includes('C-')){
    sum = sum.replaceAll('C-', '1.7');
  }
  if(sum.includes('D+')){
    sum = sum.replaceAll('D+', '1.3');
  }
  if(sum.includes('D')){
    sum = sum.replaceAll('D', '1.0');
  }
  if(sum.includes('D-')){
    sum = sum.replaceAll('D-', '0.7');
  }
  if  (sum.includes('F')){
    sum = sum.replaceAll('F', '0.0');
  }
  while(sum.includes(',')){
    sum = sum.replace(',', '+');
    numberOfGrades++;
  }
  document.getElementById("output").innerHTML = (eval(sum) / numberOfGrades);
}
```

Thanks for reading!
-Quinn

[View Project](https://gpa-calculator.analyze185.repl.co/)
[Code](https://github.com/Analyze0/GPA-Calulator/tree/main)