In this article I would like to share with you a program that I wrote that using HTML forms, Javascript and CSS I called this program Student Subject Grade Solver in JavaScript. What does the program do is to ask the user to enter the name of the student, the subject, the prelim, midterm and endterm grade of the student and then the program will compute the average of the student. In addition the program will check and determine whether the student pass or failed in the subject by giving a remark passed or failed.
I added a function to clear the text boxes in order for a new student record to be process by our program. The code is written purely using JavaScript it is not hard as many may think. It takes a lot of learning and patience how the code works. I see to it that the code is very easy to understand and use.
If you have some questions please send me an email at jake.r.pomperada@gmail.com and jakerpomperada@yahoo.com. My mobile number here in the Philippines is 09173084360.
Sample Program Output
Program Listing
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Student Subject Grade Solver</title>
</head>
<style>
body {
background-color:lightgreen;
font-family:arial;
color:blue;
size:5;
font-weight:bold;
}
label{
display: table-cell;
text-align: right;
}
input {
display: table-cell;
}
div.row{
display:table-row;
}
</style>
<body>
<h2> Student Subject Grade Solver </h2>
<div class="row"><label>Student Name</label>
<input type="text" size="40" id="student_name" autofocus><br></div>
<div class="row"><label>Subject</label>
<input type = "text" size="30" id="subject"></div><br>
<div class="row"><label>Prelim Grade</label>
<input type="text" size="3" id="prelim_grade"></div>
<div class="row"><label>Midterm Grade</label>
<input type="text" size="3" id="midterm_grade"></div>
<div class="row"><label>Endterm Grade</label>
<input type="text" size="3" id="endterm_grade"></div>
<br>
<button title="Click here to compute the subject grade of the student.">Compute Grade</button>
<button title="Click here to clear the text box.">Clear</button><br>
<br><br>
<div id="result1"></div>
<script>
var button = document.getElementsByTagName('button');
button[0].onclick = solve_subject_grade;
button[1].onclick = clear_text;
document.onload = function() {
document.getElementById('student_name').focus();
};
function solve_subject_grade() {
var remarks;
var student_name = document.getElementById("student_name").value;
var subject = document.getElementById("subject").value;
var prelim_grade = document.getElementById("prelim_grade").value;
var midterm_grade = document.getElementById("midterm_grade").value;
var endterm_grade = document.getElementById("endterm_grade").value;
var final_grade =(parseInt(prelim_grade) + parseInt(midterm_grade)+ parseInt(endterm_grade)) / 3;
if (final_grade >= 75) {
remarks = " passed ";
}
if (final_grade <= 74) {
remarks = " failed ";
}
if (student_name && subject && prelim_grade && midterm_grade && endterm_grade) {
document.getElementById('result1').innerHTML =
student_name + " your final grade in the " +subject+ " is " +
"<font color='red'>"+ Math.round(final_grade,0) + "</font>.<br><br>"+
"You " + remarks + " the subject.";
} else {
document.getElementById('result1').innerHTML = "Kindly check first your input values."
}
}
function clear_text() {
document.getElementById("student_name").value="";
document.getElementById("subject").value="";
document.getElementById("prelim_grade").value="";
document.getElementById("midterm_grade").value="";
document.getElementById("endterm_grade").value="";
document.getElementById("student_name").focus();
}
</script>
</body>
</html>
