<!DOCTYPE html> <!-- Tells the browser this is an HTML5 document -->
<html>
<head>
<title>Student Grading System</title> <!-- Title of the webpage -->
</head>
<body>
<h2>Student Grading Form</h2> <!-- Heading displayed on the page -->
<!-- The form where user inputs student data -->
<form id="gradeForm">
<!-- Input for student name -->
<label>Student Name:</label><br>
<input type="text" id="name" required><br><br>
<!-- Input for student ID -->
<label>Student ID:</label><br>
<input type="text" id="studentId" required><br><br>
<!-- Input for score (0–100) -->
<label>Score:</label><br>
<input type="number" id="score" min="0" max="100" required><br><br>
<!-- Button the user clicks to calculate grade -->
<button type="button" onclick="calculateGrade()">Submit</button>
</form>
<!-- Area where the result will be shown -->
<h3>Result:</h3>
<div id="result"></div>
<script>
// This function runs when the "Submit" button is clicked
function calculateGrade() {
// Get the value of the "name" input field
let name = document.getElementById("name").value;
// Get the value of the "studentId" input field
let studentId = document.getElementById("studentId").value;
// Get the numeric value of the "score" input field
let score = Number(document.getElementById("score").value);
// Variable to store the grade
let grade;
// Check score and assign the correct grade
if (score >= 90) grade = "A"; // Score 90–100
else if (score >= 80) grade = "B"; // Score 80–89
else if (score >= 70) grade = "C"; // Score 70–79
else if (score >= 60) grade = "D"; // Score 60–69
else grade = "F"; // Score below 60
// Display all results inside the "result" div
document.getElementById("result").innerHTML = `
<p><strong>Name:</strong> ${name}</p>
<p><strong>ID:</strong> ${studentId}</p>
<p><strong>Score:</strong> ${score}</p>
<p><strong>Grade:</strong> ${grade}</p>
`;
}
</script>
</body>
</html>