Student Marks Record

Student Marks Sheet

Code


                    <!-------------------------- © 2007 - present, dmj.one and contributors. ----------------------------------
   Part of the dmjone project. Licensed under the GNU AGPL. Provided as-is, without warranty of any kind. 
-------------------- Redistribution and modifications must retain this notice. --------------------------->

<!DOCTYPE html>
<!--[if lte 8]><html class="pre-ie9" lang="en"><![endif]-->
<!--[if gte IE 9]><!-->
<html lang="en">
    <!--<![endif]-->

    <head>       
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Student Marks Record</title>       
    </head>

    <body>
        
            <div id="students-container"></div>

            <script>
                function calculateTotalAndGrade(marks) {
                    const total = Object.values(marks).reduce((sum, mark) => sum + parseInt(mark), 0);
                    const percentage = (total / 500) * 100;
                    let grade = '';

                    if (percentage >= 95) grade = 'O'; // Outstanding r
                    else if (percentage >= 90) grade = 'A+';
                    else if (percentage >= 80) grade = 'A';
                    else if (percentage >= 70) grade = 'B';
                    else if (percentage >= 60) grade = 'C';
                    else if (percentage >= 50) grade = 'D';
                    else grade = 'F';

                    const cgpa = (percentage / 10).toFixed(2);

                    return { total, percentage: percentage.toFixed(2), cgpa: cgpa, grade };
                }

                function generateStudentMarksTable(studentMarks) {
                    let container = document.getElementById('students-container');

                    studentMarks.forEach(student => {
                        const { total, percentage, cgpa, grade } = calculateTotalAndGrade(student.marks);

                        let studentInfo = document.createElement('div');
                        studentInfo.className = 'student-info p-4 mb-5';

                        studentInfo.innerHTML = `
                        <div class="student-details row text-center mb-3">
                            <div class="col-12 col-md-4">
                                <h5 class="">Name: <span class="fw-bold">${student.name}</span></h5>
                            </div>
                            <div class="col-12 col-md-4">
                                <h5 class="">Roll Number: <span class="fw-bold">${student.rollNumber}</span></h5>
                            </div>
                            <div class="col-12 col-md-4">
                                <h5 class="">Age: <span class="fw-bold">${student.age}</span></h5>
                            </div>
                        </div>
                        <div class="student-details row text-center mb-4">
                            <div class="col-12 col-md-6">
                                <h6 class="">Branch: <span class="fw-bold">${student.branch}</span></h6>
                            </div>
                            <div class="col-12 col-md-6">
                                <h6 class="">Semester: <span class="fw-bold">${student.sem}</span></h6>
                            </div>
                        </div>

                        <div class="table-responsive">
                            <table class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th>Subject 1</th>
                                        <th>Subject 2</th>
                                        <th>Subject 3</th>
                                        <th>Subject 4</th>
                                        <th>Subject 5</th>
                                        <th>Total</th>
                                        <th>Percentage</th>
                                        <th>CGPA</th>
                                        <th>Grade</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>${student.marks.s1}</td>
                                        <td>${student.marks.s2}</td>
                                        <td>${student.marks.s3}</td>
                                        <td>${student.marks.s4}</td>
                                        <td>${student.marks.s5}</td>
                                        <td>${total}</td>
                                        <td>${percentage}%</td>
                                        <td>${cgpa}</td>
                                        <td>${grade}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    `;

                        container.appendChild(studentInfo);
                    });
                }

                const studentMarks = [
                    {
                        "name": "dmj.one",
                        "rollNumber": "FICTION677",
                        "branch": "CSE",
                        "sem": "4",
                        "age": "31",
                        "marks": {
                            "s1": "97",
                            "s2": "97",
                            "s3": "99",
                            "s4": "98",
                            "s5": "96"
                        }
                    },
                    {
                        "name": "Test Student",
                        "rollNumber": "FICTION678",
                        "branch": "CSE",
                        "sem": "4",
                        "age": "21",
                        "marks": {
                            "s1": "85",
                            "s2": "75",
                            "s3": "65",
                            "s4": "55",
                            "s5": "45"
                        }
                    }
                ];

                generateStudentMarksTable(studentMarks);
            </script>
    </body>
</html>