Changed around line 1
+ const gradeForm = document.getElementById('grade-form');
+ const gradeTable = document.getElementById('grade-table').getElementsByTagName('tbody')[0];
+ const averageGrade = document.getElementById('average-grade');
+ const highestGrade = document.getElementById('highest-grade');
+ const lowestGrade = document.getElementById('lowest-grade');
+ const gradeChart = document.getElementById('grade-chart').getContext('2d');
+
+ let grades = [];
+
+ gradeForm.addEventListener('submit', function(e) {
+ e.preventDefault();
+
+ const studentName = document.getElementById('student-name').value;
+ const subject = document.getElementById('subject').value;
+ const grade = parseInt(document.getElementById('grade').value);
+
+ const newGrade = {
+ id: Date.now(),
+ studentName,
+ subject,
+ grade
+ };
+
+ grades.push(newGrade);
+ addGradeToTable(newGrade);
+ updateStats();
+ updateChart();
+ gradeForm.reset();
+ });
+
+ function addGradeToTable(grade) {
+ const row = gradeTable.insertRow();
+
+ row.innerHTML = `
+
${grade.studentName} | +
${grade.subject} | +
${grade.grade} | + `;
+ }
+
+ function updateStats() {
+ const gradeValues = grades.map(g => g.grade);
+ const total = gradeValues.reduce((sum, grade) => sum + grade, 0);
+ const avg = total / gradeValues.length || 0;
+ const max = Math.max(...gradeValues) || 0;
+ const min = Math.min(...gradeValues) || 0;
+
+ averageGrade.textContent = avg.toFixed(2);
+ highestGrade.textContent = max;
+ lowestGrade.textContent = min;
+ }
+
+ function updateChart() {
+ const chart = new Chart(gradeChart, {
+ type: 'line',
+ data: {
+ labels: grades.map((_, i) => `Grade ${i + 1}`),
+ datasets: [{
+ label: 'Grades',
+ data: grades.map(g => g.grade),
+ backgroundColor: 'rgba(74, 144, 226, 0.2)',
+ borderColor: 'rgba(74, 144, 226, 1)',
+ borderWidth: 2
+ }]
+ },
+ options: {
+ scales: {
+ y: {
+ beginAtZero: true,
+ max: 100
+ }
+ }
+ }
+ });
+ }
+
+ function editGrade(id) {
+ const grade = grades.find(g => g.id === id);
+ if (grade) {
+ document.getElementById('student-name').value = grade.studentName;
+ document.getElementById('subject').value = grade.subject;
+ document.getElementById('grade').value = grade.grade;
+
+ deleteGrade(id);
+ }
+ }
+
+ function deleteGrade(id) {
+ grades = grades.filter(g => g.id !== id);
+ gradeTable.innerHTML = '';
+ grades.forEach(addGradeToTable);
+ updateStats();
+ updateChart();
+ }