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)