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

## Top comments (0)