Simple Javascript Student Grading (Free Download)

Welcome to a tutorial on how to create a simple student grading page in Javascript. Creating your own grading system, or got one of these as a boring assignment? Well, a student grading page isn’t too difficult to deal with. Read on!

 

 

TABLE OF CONTENTS

 

JS STUDENT GRADING

All right, let us now get into some details on how the simple student grading system works.

 

STUDENT GRADING DEMO

Enter 1-100 for each subject, then hit “calculate”.

Total
Average

 

 

PART 1) THE HTML

js-grades.html
 <!-- (A) ENTER MARKS -->
<form id="gradeForm"></form>
 
<!-- (B) CALCULATIONS -->
<div id="gradeCalc">
  <div class="row">
    <div class="grade">Total</div>
    <div id="gradeT"></div>
  </div>
  <div class="row">
    <div class="grade">Average</div>
    <div id="gradeA"></div>
  </div>
</div>

The HTML should be pretty straightforward.

  1. An HTML form to input the points for each subject. We will use Javascript to generate the form fields.
  2. The total and average points.

 

PART 2) THE JAVASCRIPT

2A) PROPERTIES

js-grades.js
var gradr = {
  // (A) PROPERTIES
  subjects : ["English", "Math", "Science", "Arts"],
  min : 0, max: 100,
  // ...
};

Once again, the first part of the Javascript is self-explanatory. These are the subjects, and the min/max points.

 

 

2B) INIT

js-grades.js
// (B) INIT
init : () => {
  // (B1) HTML FORM
  let form = document.getElementById("gradeForm");
  form.onsubmit = () => gradr.calc();
 
  // (B2) CREATE FORM FIELDS
  let element;
  for (let s of gradr.subjects) {
    // (B2-1) SUBJECT LABEL
    element = document.createElement("label");
    element.innerHTML = s;
    form.appendChild(element);
 
    // (B2-2) SUBJECT MARKS INPUT
    element = document.createElement("div");
    element.name = s;
    element.className = "row";
    element.innerHTML = `<div class="grade"></div><input type="number" min="${gradr.min}" max="${gradr.max}" required>`;
    form.appendChild(element);
  }
 
  // (B2-3) SUBMIT BUTTON
  element = document.createElement("input");
  element.type = "submit";
  element.value = "Calculate";
  form.appendChild(element);
},
 
// ...
 
window.onload = gradr.init;

On window load, gradr.init() will run. Not going to explain line-by-line, but what it essentially does is loop through gradr.subjects and create the HTML form fields.

 

 

2C) CALCULATION

js-grades.js
// (C) CALCULATE GRADES
calc : () => {
  // (C1) VARIABLES
  let marks, grade, average = 0, total = 0,
      subjects = document.querySelectorAll("#gradeForm input[type=number]");

  // (C2) LOOP THROUGH SUBJECTS
  for (let s of subjects) {
    // (C2-1) ADD TO TOTAL
    marks = parseInt(s.value);
    total += marks;

    // (C2-2) GRADE
    if (marks>=70) { grade = "A"; }
    else if (marks>=60) { grade = "B"; }
    else if (marks>=50) { grade = "C"; }
    else if (marks>=40) { grade = "D"; }
    else if (marks>=30) { grade = "E"; }
    else { grade = "F"; }
    s.previousSibling.innerHTML = grade;
  }

  // (C3) TOTAL & AVERAGE
  document.getElementById("gradeT").innerHTML = total;
  document.getElementById("gradeA").innerHTML = (total / subjects.length).toFixed(2);

  // (C4) PREVENT FORM SUBMIT
  return false;
}

On form submit, gradr.calc() will run. No need to panic. All this does is get all the <input> fields, calculate the totals, and update the HTML. The end.

 

DOWNLOAD & NOTES

Here is the download link to the example code, so you don’t have to copy-paste everything.

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

EXAMPLE CODE DOWNLOAD

Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

EXTRA BITS & LINKS

That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.

 

COMPATIBILITY CHECKS

This example will work on most browsers.

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

2 thoughts on “Simple Javascript Student Grading (Free Download)”

  1. Hi!
    thank you for your free coding which is very useful. Since I am not a coder I was wondering if there is a possibility to adjust decimals to the numbers? like 0.5 instead only whole numbers? I would appreciate your help, please inform further.

    Best regards,

    Michiel

Leave a Comment

Your email address will not be published. Required fields are marked *