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!
ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.
TABLE OF CONTENTS
DOWNLOAD & DEMO
Firstly, here is the download link to the example code as promised.
QUICK NOTES
If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.
EXAMPLE CODE DOWNLOAD
Click here to download all the example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
STUDENT GRADING DEMO
Enter 1-100 for each subject, then hit “calculate”.
JS STUDENT GRADING
All right, let us now get into some details on how the simple student grading system works.
PART 1) THE 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.
- An HTML form to input the points for each subject. We will use Javascript to generate the form fields.
- The total and average points.
PART 2) THE JAVASCRIPT
2A) PROPERTIES
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
// (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
// (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.
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
- Arrow Functions – CanIUse
This example will work on most browsers.
LINKS & REFERENCES
- Example on CodePen – Javascript Student Grades
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!
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
<input type="number" step="0.5">