group 1: Project : Student Result Manager
Updated: 29 Jul 2026, 10:20:42
Project: Student-Result-Manager
Structure:
Student-Result-Manager/
│
├── index.html
├── style.css
├── script.js
├── functions.js
├── students.json
└── README.txtFeatures
- ✔ Add Student
- ✔ Search by Roll No or Name
- ✔ Percentage Calculation
- ✔ Automatic Grade Calculation
- ✔ Display Student List
- ✔ Delete Student
- ✔ Load Sample Data from JSON
- ✔ Responsive Design
- ✔ Pure HTML + CSS + JavaScript
File 1 : index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Result Manager</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>📘 Student Result Manager</h1>
<div class="form-container">
<h2>Add Student</h2>
<form id="studentForm">
<input
type="text"
id="roll"
placeholder="Roll Number"
required>
<input
type="text"
id="name"
placeholder="Student Name"
required>
<input
type="number"
id="math"
placeholder="Math"
min="0"
max="100"
required>
<input
type="number"
id="science"
placeholder="Science"
min="0"
max="100"
required>
<input
type="number"
id="english"
placeholder="English"
min="0"
max="100"
required>
<button type="submit">
Add Student
</button>
</form>
</div>
<div class="search">
<input
type="text"
id="search"
placeholder="Search by Roll or Name">
</div>
<table>
<thead>
<tr>
<th>Roll</th>
<th>Name</th>
<th>Math</th>
<th>Science</th>
<th>English</th>
<th>Total</th>
<th>%</th>
<th>Grade</th>
<th>Action</th>
</tr>
</thead>
<tbody id="studentTable">
</tbody>
</table>
</div>
<script src="functions.js"></script>
<script src="script.js"></script>
</body>
</html>
File 2 (style.css):
/* ===========================
Student Result Manager
style.css
=========================== */
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}
body{
background:#f4f7fb;
padding:30px;
}
.container{
max-width:1200px;
margin:auto;
background:#ffffff;
padding:25px;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,0.15);
}
h1{
text-align:center;
color:#1f4e79;
margin-bottom:25px;
}
.form-container{
margin-bottom:25px;
}
.form-container h2{
color:#333;
margin-bottom:15px;
}
#studentForm{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
gap:12px;
}
#studentForm input{
padding:10px;
border:1px solid #ccc;
border-radius:6px;
font-size:15px;
}
#studentForm input:focus{
outline:none;
border-color:#1976d2;
}
#studentForm button{
background:#1976d2;
color:white;
border:none;
border-radius:6px;
padding:10px;
cursor:pointer;
font-size:15px;
transition:0.3s;
}
#studentForm button:hover{
background:#125ea8;
}
.search{
margin:25px 0;
}
.search input{
width:100%;
padding:12px;
border-radius:6px;
border:1px solid #bbb;
font-size:16px;
}
.search input:focus{
outline:none;
border-color:#1976d2;
}
table{
width:100%;
border-collapse:collapse;
margin-top:15px;
}
thead{
background:#1976d2;
color:white;
}
th,
td{
border:1px solid #ddd;
padding:10px;
text-align:center;
}
tbody tr:nth-child(even){
background:#f9f9f9;
}
tbody tr:hover{
background:#eef6ff;
}
.delete-btn{
background:#e53935;
color:white;
border:none;
padding:7px 12px;
border-radius:5px;
cursor:pointer;
}
.delete-btn:hover{
background:#c62828;
}
.grade-a{
color:green;
font-weight:bold;
}
.grade-b{
color:#1565c0;
font-weight:bold;
}
.grade-c{
color:#f57c00;
font-weight:bold;
}
.grade-d{
color:#8d6e63;
font-weight:bold;
}
.grade-f{
color:red;
font-weight:bold;
}
@media(max-width:900px){
body{
padding:10px;
}
.container{
padding:15px;
}
table{
display:block;
overflow-x:auto;
white-space:nowrap;
}
#studentForm{
grid-template-columns:1fr;
}
}
File 3: functions.js
/*=========================================
Student Result Manager
functions.js
Utility Functions
=========================================*/
/**
* Calculate total marks
*/
function calculateTotal(math, science, english) {
return Number(math) +
Number(science) +
Number(english);
}
/**
* Calculate percentage
*/
function calculatePercentage(total) {
return (total / 300 * 100).toFixed(2);
}
/**
* Calculate Grade
*/
function calculateGrade(percentage) {
percentage = Number(percentage);
if (percentage >= 90)
return "A+";
if (percentage >= 80)
return "A";
if (percentage >= 70)
return "B";
if (percentage >= 60)
return "C";
if (percentage >= 50)
return "D";
return "F";
}
/**
* Return CSS class for grade
*/
function getGradeClass(grade) {
switch (grade) {
case "A+":
case "A":
return "grade-a";
case "B":
return "grade-b";
case "C":
return "grade-c";
case "D":
return "grade-d";
default:
return "grade-f";
}
}
/**
* Validate Marks
*/
function validateMarks(math, science, english) {
const marks = [math, science, english];
for (let mark of marks) {
if (mark === "" || isNaN(mark))
return false;
mark = Number(mark);
if (mark < 0 || mark > 100)
return false;
}
return true;
}
/**
* Search students by
* Roll Number OR Name
*/
function searchStudents(studentArray, keyword) {
keyword = keyword.toLowerCase().trim();
return studentArray.filter(student =>
student.roll.toLowerCase().includes(keyword) ||
student.name.toLowerCase().includes(keyword)
);
}
/**
* Check duplicate Roll Number
*/
function rollExists(studentArray, roll) {
return studentArray.some(student =>
student.roll.toLowerCase() === roll.toLowerCase()
);
}
/**
* Generate Student Object
*/
function createStudent(roll, name, math, science, english) {
const total = calculateTotal(
math,
science,
english
);
const percentage =
calculatePercentage(total);
const grade =
calculateGrade(percentage);
return {
roll: roll,
name: name,
math: Number(math),
science: Number(science),
english: Number(english),
total: total,
percentage: percentage,
grade: grade
};
}
/**
* Clear Form
*/
function clearForm() {
document
.getElementById("studentForm")
.reset();
}
/**
* Display message
*/
function showMessage(message) {
alert(message);
}
File4: students.json
[
{
"roll": "101",
"name": "Aarav Sharma",
"math": 92,
"science": 88,
"english": 90,
"total": 270,
"percentage": "90.00",
"grade": "A+"
},
{
"roll": "102",
"name": "Priya Verma",
"math": 85,
"science": 80,
"english": 78,
"total": 243,
"percentage": "81.00",
"grade": "A"
},
{
"roll": "103",
"name": "Rohan Singh",
"math": 74,
"science": 72,
"english": 76,
"total": 222,
"percentage": "74.00",
"grade": "B"
},
{
"roll": "104",
"name": "Sneha Gupta",
"math": 67,
"science": 64,
"english": 70,
"total": 201,
"percentage": "67.00",
"grade": "C"
},
{
"roll": "105",
"name": "Aditya Kumar",
"math": 58,
"science": 55,
"english": 60,
"total": 173,
"percentage": "57.67",
"grade": "D"
},
{
"roll": "106",
"name": "Neha Joshi",
"math": 96,
"science": 94,
"english": 91,
"total": 281,
"percentage": "93.67",
"grade": "A+"
},
{
"roll": "107",
"name": "Karan Mehta",
"math": 45,
"science": 52,
"english": 48,
"total": 145,
"percentage": "48.33",
"grade": "F"
},
{
"roll": "108",
"name": "Ananya Patel",
"math": 88,
"science": 86,
"english": 84,
"total": 258,
"percentage": "86.00",
"grade": "A"
},
{
"roll": "109",
"name": "Vikram Yadav",
"math": 79,
"science": 75,
"english": 81,
"total": 235,
"percentage": "78.33",
"grade": "B"
},
{
"roll": "110",
"name": "Meera Kapoor",
"math": 63,
"science": 68,
"english": 66,
"total": 197,
"percentage": "65.67",
"grade": "C"
}
]
File 5: script.js
/*=========================================
Student Result Manager
script.js
=========================================*/
let students = [];
// DOM Elements
const studentForm = document.getElementById("studentForm");
const studentTable = document.getElementById("studentTable");
const searchBox = document.getElementById("search");
/*=========================================
Load JSON Data
=========================================*/
async function loadStudents() {
try {
const response = await fetch("students.json");
students = await response.json();
renderTable(students);
} catch (error) {
console.error(error);
showMessage("Unable to load students.json");
}
}
/*=========================================
Display Students
=========================================*/
function renderTable(studentArray) {
studentTable.innerHTML = "";
if (studentArray.length === 0) {
studentTable.innerHTML = `
No Student Found
`;
return;
}
studentArray.forEach((student, index) => {
studentTable.innerHTML += `
${student.roll}
${student.name}
${student.math}
${student.science}
${student.english}
${student.total}
${student.percentage}%
${student.grade}
class="delete-btn"
onclick="deleteStudent(${index})">
Delete
`;
});
}
/*=========================================
Add Student
=========================================*/
studentForm.addEventListener("submit", function (e) {
e.preventDefault();
const roll = document.getElementById("roll").value.trim();
const name = document.getElementById("name").value.trim();
const math = document.getElementById("math").value;
const science = document.getElementById("science").value;
const english = document.getElementById("english").value;
if (!validateMarks(math, science, english)) {
showMessage("Marks should be between 0 and 100.");
return;
}
if (rollExists(students, roll)) {
showMessage("Roll Number already exists.");
return;
}
const student = createStudent(
roll,
name,
math,
science,
english
);
students.push(student);
renderTable(students);
clearForm();
showMessage("Student Added Successfully.");
});
/*=========================================
Delete Student
=========================================*/
function deleteStudent(index) {
const ok = confirm("Delete this student?");
if (!ok)
return;
students.splice(index, 1);
renderTable(students);
}
/*=========================================
Search Student
=========================================*/
searchBox.addEventListener("keyup", function () {
const keyword = searchBox.value;
if (keyword.trim() === "") {
renderTable(students);
return;
}
const result = searchStudents(
students,
keyword
);
renderTable(result);
});
/*=========================================
Load Data on Startup
=========================================*/
loadStudents();
File 6: README.txt
===========================================================
STUDENT RESULT MANAGER
===========================================================
Project Type
------------
Mini Project using HTML, CSS, JavaScript and JSON
Author
------
Your Name
Version
-------
1.0
-----------------------------------------------------------
DESCRIPTION
-----------------------------------------------------------
Student Result Manager is a simple web application developed
using HTML, CSS and JavaScript.
The application loads student records from a JSON file,
allows users to add new students, search students by
Roll Number or Name, calculate total marks, percentage,
grade, and delete student records.
No backend or database server is required.
-----------------------------------------------------------
FEATURES
-----------------------------------------------------------
✔ Load student data from students.json
✔ Add new student
✔ Search by Roll Number
✔ Search by Student Name
✔ Automatic Total Calculation
✔ Automatic Percentage Calculation
✔ Automatic Grade Calculation
✔ Delete Student
✔ Responsive Design
-----------------------------------------------------------
GRADE SYSTEM
-----------------------------------------------------------
Percentage Grade
90 - 100 A+
80 - 89 A
70 - 79 B
60 - 69 C
50 - 59 D
Below 50 F
-----------------------------------------------------------
PROJECT STRUCTURE
-----------------------------------------------------------
Student-Result-Manager/
│
├── index.html
├── style.css
├── script.js
├── functions.js
├── students.json
└── README.txt
-----------------------------------------------------------
TECHNOLOGIES USED
-----------------------------------------------------------
HTML5
CSS3
JavaScript (ES6)
JSON
DOM Manipulation
Fetch API
-----------------------------------------------------------
JAVASCRIPT CONCEPTS USED
-----------------------------------------------------------
Variables
Functions
Arrays
Objects
Loops
Conditional Statements
Arrow Functions
Array.filter()
Array.some()
Array.push()
Array.splice()
DOM Manipulation
Event Listeners
Fetch API
Async / Await
Template Literals
-----------------------------------------------------------
HOW TO RUN
-----------------------------------------------------------
Method 1 (Recommended)
1. Open the project folder in Visual Studio Code.
2. Install the "Live Server" extension.
3. Right-click index.html.
4. Select "Open with Live Server".
The project will open in your browser.
-----------------------------------------------------------
Method 2
You can also host the folder on any local web server.
Do NOT open index.html directly by double-clicking,
because most browsers block loading JSON files
using fetch() from local files.
-----------------------------------------------------------
HOW TO USE
-----------------------------------------------------------
1. Open the project.
2. Existing students are loaded automatically.
3. Fill in:
Roll Number
Student Name
Math Marks
Science Marks
English Marks
4. Click "Add Student".
5. Use the Search Box to search by Roll Number or Name.
6. Click Delete to remove a student.
-----------------------------------------------------------
LIMITATIONS
-----------------------------------------------------------
• Added students exist only while the page is open.
• Changes are NOT saved to students.json because browsers
cannot modify local files using JavaScript.
• No login system.
• No edit feature.
-----------------------------------------------------------
FUTURE IMPROVEMENTS
-----------------------------------------------------------
□ Edit Student
□ Save using Local Storage
□ Export to PDF
□ Export to Excel
□ Print Result
□ Student Photo
□ Subject-wise Grades
□ Class Topper
□ Rank Calculation
□ Pass / Fail Statistics
□ Dark Mode
□ Charts and Graphs
□ Multiple Classes
□ Semester-wise Results
-----------------------------------------------------------
LEARNING OUTCOMES
-----------------------------------------------------------
After completing this project, you will understand:
• HTML Forms
• CSS Layout
• JavaScript Functions
• JSON Data
• Fetch API
• DOM Manipulation
• Event Handling
• Arrays and Objects
• Search Algorithm
• Percentage and Grade Calculation
-----------------------------------------------------------
END OF PROJECT
-----------------------------------------------------------
About Author
Swarnim Raj
Author & Career Content Writer
Experienced education and career writer at Infokept Career Hub, creating simple, research-based guides for students and government job aspirants.