In this article, we will generate the Total,Average,Grade and Result of Student for a particular class using JavaScript and HTML.
Introduction
In this article, we will generate the Total,Average,Grade and Result of Student for a particular class using JavaScript and HTML.
Using the code
Let us first write the HTML code
<html>
<head>
<title>Student Results</title>
</head>
<body>
<fieldset style="width:600px">
<legend><b>Student Input Section:</b></legend>
Name:<input type="text" id="txtName">
Class:<input type="text" id="txtClass"> <br/><br/>
<table border="1">
<tr><td>English</td><td><input type="text" id="txtEnglish"></td></tr>
<tr><td>Kannada</td><td><input type="text" id="txtKannada"></td></tr>
<tr><td>Maths</td><td><input type="text" id="txtMaths"></td></tr>
<tr><td>Science</td><td><input type="text" id="txtScience"></td></tr>
</table><br/><br/>
<input type="button" value="Get Result">
</fieldset>
<h2>Report Card</h2>
<table border="1">
<tr><td>Name</td><td><input type="text" id="txtStudentName" readonly></td></tr>
<tr><td>Class</td><td><input type="text" id="txtStudentClass" readonly></td></tr>
<tr><td>Total Marks</td><td><input type="text" id="txtTotalMarks" readonly></td></tr>
<tr><td>Average Marks</td><td><input type="text" id="txtAvgMarks" readonly></td></tr>
<tr><td>Grade</td><td><input type="text" id="txtGrade" readonly></td></tr>
<tr><td>Remarks</td><td><input type="text" id="txtResult" readonly></td></tr>
</table>
</body>
</html>
The output will be
Now let us write the JavaScript function for the operation
function getReport(){
var grade = ""; //declare a variable for grade
var result=""; //declare a variable for result
//read the marks
var engMarks = document.getElementById('txtEnglish').value;
var kannadaMarks = document.getElementById('txtKannada').value;
var mathsMarks = document.getElementById('txtMaths').value;
var scienceMarks = document.getElementById('txtScience').value;
//calculate the total marks (using double notation technique)
var totalMarks = engMarks - (- kannadaMarks) - (- mathsMarks) - (- scienceMarks);
//get the average marks
var averageMarks = totalMarks / 4;
//find the grade and result using the ternary operator inside the switch statement
switch(
//usage of ternary operator inside switch
(averageMarks > 60 && averageMarks <= 100) ? 1 :
(averageMarks > 50 && averageMarks < 60) ? 2 :
(averageMarks > 40 && averageMarks < 50) ? 3 : 0
)
{
case 1 :grade = "A";result="First Class";break;
case 2 :grade = "B"; result="Second Class";break;
case 3 :grade = "C"; result="Third Class";break;
case 0 :grade = "D"; result="Fail";break;
}
//display the results
document.getElementById('txtStudentName').value = document.getElementById('txtName').value;
document.getElementById('txtStudentClass').value = document.getElementById('txtClass').value;
document.getElementById('txtTotalMarks').value = totalMarks;
document.getElementById('txtAvgMarks').value = averageMarks;
document.getElementById('txtGrade').value = grade;
document.getElementById('txtResult').value = result;
} //end of function getReport
The program is simple to understand.Only thing is the use of ternary operator inside the switch statement for the evaluation of grade and result. Generaly, we use if..else block for the same.But here we have used ternary operator for the same.
Now let use provide some input to the form and see the result
Conclusion
Hope this will be helpful.Thanks for reading.Zipped file attached.