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>