Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Creating a Dynamic Report Card using HTML, CSS, and JavaScript
In this article, we are going to build a dynamic report card using the inputs entered by the user. The user will enter student names and marks for different subjects, and our application will automatically calculate the total marks, average percentage, and pass/fail status. We will be using HTML, CSS, and JavaScript for the implementation.
This interactive report card system allows teachers or administrators to quickly generate student performance reports by simply entering marks and clicking a calculate button.
Project Overview
We will create an HTML form with input fields for student name and marks in four subjects: English, Physics, Chemistry, and Mathematics.
A results table will display student data with columns: Name, Total Marks, Average Percentage, and Pass/Fail Status.
For each student entry, a new row will be dynamically added to the results table showing calculated totals and status.
The pass/fail status depends on the student's average score. If average ? 33%, the student passes; otherwise, they fail.
JavaScript will handle all calculations and dynamic table updates.
Complete Implementation
Here's the complete code for our dynamic report card system:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Report Card</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 20px;
}
h1 {
color: green;
text-align: center;
}
table {
margin: 20px auto;
border-collapse: collapse;
background-color: white;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
th, td {
padding: 10px;
text-align: center;
border: 1px solid #ddd;
}
th {
background-color: #f8f9fa;
}
input[type="text"] {
width: 80px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 3px;
}
.calculate-btn {
background-color: #007bff;
color: white;
padding: 8px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.calculate-btn:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<h1>Dynamic Report Card Generator</h1>
<table>
<caption><b>Enter Student Marks</b></caption>
<tr>
<th rowspan="2">Student Name</th>
<th colspan="4">Subject Marks (out of 100)</th>
</tr>
<tr>
<th>English</th>
<th>Physics</th>
<th>Chemistry</th>
<th>Mathematics</th>
</tr>
<tr>
<td><input type="text" id="name" placeholder="Enter name"></td>
<td><input type="text" id="english" placeholder="0-100"></td>
<td><input type="text" id="physics" placeholder="0-100"></td>
<td><input type="text" id="chemistry" placeholder="0-100"></td>
<td><input type="text" id="maths" placeholder="0-100"></td>
</tr>
<tr>
<td colspan="5">
<button class="calculate-btn" onclick="calculateResult()">Calculate Result</button>
</td>
</tr>
</table>
<table id="resultsTable">
<caption><b>Student Results</b></caption>
<tr>
<th>Student Name</th>
<th>Total Marks</th>
<th>Average %</th>
<th>Result</th>
</tr>
</table>
<script>
function calculateResult() {
// Get input values
var studentName = document.getElementById('name').value.trim();
var english = parseFloat(document.getElementById('english').value) || 0;
var physics = parseFloat(document.getElementById('physics').value) || 0;
var chemistry = parseFloat(document.getElementById('chemistry').value) || 0;
var maths = parseFloat(document.getElementById('maths').value) || 0;
// Validate inputs
if (!studentName) {
alert('Please enter student name');
return;
}
if (english < 0 || english > 100 || physics < 0 || physics > 100 ||
chemistry < 0 || chemistry > 100 || maths < 0 || maths > 100) {
alert('Please enter valid marks between 0 and 100');
return;
}
// Calculate totals
var totalMarks = english + physics + chemistry + maths;
var averagePercentage = (totalMarks / 4).toFixed(2);
// Determine pass/fail status
var result = averagePercentage >= 33 ?
'<span style="color: green; font-weight: bold;">PASS</span>' :
'<span style="color: red; font-weight: bold;">FAIL</span>';
// Add new row to results table
var table = document.getElementById('resultsTable');
var newRow = table.insertRow(-1);
newRow.insertCell(0).innerHTML = studentName;
newRow.insertCell(1).innerHTML = totalMarks + '/400';
newRow.insertCell(2).innerHTML = averagePercentage + '%';
newRow.insertCell(3).innerHTML = result;
// Clear input fields for next entry
document.getElementById('name').value = '';
document.getElementById('english').value = '';
document.getElementById('physics').value = '';
document.getElementById('chemistry').value = '';
document.getElementById('maths').value = '';
// Focus on name field for quick next entry
document.getElementById('name').focus();
}
// Allow Enter key to calculate result
document.addEventListener('keypress', function(event) {
if (event.key === 'Enter') {
calculateResult();
}
});
</script>
</body>
</html>
How It Works
The application works through the following process:
Input Collection: Users enter the student name and marks for four subjects in the input form.
Validation: JavaScript validates that the name is not empty and marks are between 0-100.
Calculation: The system calculates total marks (sum of all subjects) and average percentage (total/4).
Result Determination: If average ? 33%, the student passes; otherwise, they fail.
Display: A new row is dynamically added to the results table with all calculated values.
Reset: Input fields are cleared for the next student entry.
Key Features
Input Validation: Ensures valid data entry with proper error messages
Dynamic Table Updates: Results appear instantly without page refresh
Visual Feedback: Pass/fail status shown in green/red colors
Keyboard Support: Press Enter to calculate results quickly
Auto-clear: Input fields reset after each calculation
Responsive Design: Clean, modern styling with proper spacing
Output
When you run this application, you'll see a form where you can enter student names and their marks in four subjects. After clicking "Calculate Result", the student's data appears in the results table below showing total marks, average percentage, and pass/fail status. The interface is clean and user-friendly, making it easy to process multiple students quickly.
Conclusion
This dynamic report card system demonstrates how HTML, CSS, and JavaScript work together to create interactive web applications. The system provides real-time calculations and visual feedback, making it practical for educational institutions to quickly generate student performance reports.
5K+ Views
