Display Total,Average,Grade and Result of Student

Rajnilari2015
Posted by in JavaScript category on for Beginner level | Points: 250 | Views : 1309 red flag

In this article, we will generate the Total,Average,Grade and Result of Student for a particular class using JavaScript and HTML.


 Download source code for Display Total,Average,Grade and Result of Student

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.

Page copy protected against web site content infringement by Copyscape

About the Author

Rajnilari2015
Full Name: Niladri Biswas (RNA Team)
Member Level: Platinum
Member Status: Member,MVP
Member Since: 3/17/2015 2:41:06 AM
Country: India
-- Thanks & Regards, RNA Team


Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)