How to Calculate Grade Point Average Automatically in JavaScript

How to Calculate Grade Point Average Automatically in JavaScript

Introduction

In this tutorial we will create a How to Calculate Grade Point Average Automatically in JavaScript. This tutorial purpose is to teach you how you can calculate the student gpa automatically. This will tackle all the basic function that will calculate the gpa. I will provide a sample program to show the actual coding of this tutorial.

This tutorial is simple and easy to understand just follow the instruction I provided and you can do it without a problem. This program can be use to any system or application that needed to compute the student gpa. I will give my best to provide you the easiest way of creating this program Calculate GPA automatically. So let's do the coding.

Before we get started:

This is the link for the template that i used for the layout design https://getbootstrap.com/.

Creating The Interface

This is where we will create a simple interface for our application. This code will only display the html forms to calculate the gpa. To create this simply copy and write it into your text editor, then save it as index.html.
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
  5. <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
  6. </head>
  7. <nav class="navabar navbar-default">
  8. <div class="container-fluid">
  9. <a class="navbar-brand" href="https://sourcecodester.com">Sourcecodester</a>
  10. </div>
  11. </nav>
  12. <br />
  13. <div class="col-md-3"></div>
  14. <div class="col-md-6 well">
  15. <h3 class="text-primary">How to Calculate Grade Point Average Automatically</h3>
  16. <hr style="border-top:1px dotted;"/>
  17. <div class="col-md-4">
  18. <div class="form-group">
  19. <label>English</label>
  20. <input type="number" id="english" onkeyup="calculateAve();" class="form-control"/>
  21. </div>
  22. <div class="form-group">
  23. <label>Math</label>
  24. <input type="number" id="math" onkeyup="calculateAve();" class="form-control"/>
  25. </div>
  26. <div class="form-group">
  27. <label>Science</label>
  28. <input type="number" id="science" onkeyup="calculateAve();" class="form-control"/>
  29. </div>
  30. <div class="form-group">
  31. <label>Programming</label>
  32. <input type="number" id="programming" onkeyup="calculateAve();" class="form-control"/>
  33. </div>
  34. <div class="form-group">
  35. <label>History</label>
  36. <input type="number" id="history" onkeyup="calculateAve();" class="form-control"/>
  37. </div>
  38.  
  39. </div>
  40. <div class="col-md-8">
  41. <div class="form-inline">
  42. <h3>Your Final Grade</h3>
  43. <div style="border:1px solid #000; background-color:green; color:white; height:100px;">
  44. <span style="padding-left:150px; padding-right:150px; font-size:66px;" id="result"></span>
  45. </div>
  46. </div>
  47. </div>
  48. </div>
  49. <script src="script.js"></script>
  50. </body>
  51. </html>

Creating JavaScript Function

This is where the main function of the application is. This code will automate the calculation of gpa for each grade you entered. To do this just copy and write these block of codes inside the text editor and save it as script.js.
  1. function calculateAve(){
  2. let english=document.getElementById('english').value;
  3. let math=document.getElementById('math').value;
  4. let science=document.getElementById('science').value;
  5. let programming=document.getElementById('programming').value;
  6. let history=document.getElementById('history').value;
  7. let total;
  8. let ave;
  9.  
  10. if(english !="" && math !="" && science !="" && programming !="" && history !=""){
  11. total=parseInt(english)+parseInt(math)+parseInt(science)+parseInt(programming)+parseInt(history);
  12. ave=total/5
  13.  
  14. document.getElementById('result').innerHTML=ave.toFixed(0);
  15. }
  16.  
  17. }

In the code above we just simple create one method called calculateAve(). This function is consist of several variables that handle the values of each grade you have entered. In order to calculate the gpa we just simple sum all the grades and divide them to total subject that are available.

Output:

The How to Calculate Grade Point Average Automatically in JavaScript source code that I provide can be download below. Please kindly click the download button.

There you have it we successfully created How to Calculate Grade Point Average Automatically in JavaScript. I hope that this simple tutorial help you to what you are looking for. For more updates and tutorials just kindly visit this site. Enjoy Coding!

More Tutorials for JavaScript Language

JavaScript Tutorials

Add new comment