## DEV Community # How to make a GPA Calculator as a beginner in HTML & JavaScript

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(',', '+');
}
``````

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;
function calculate(e){
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(',', '+');