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.txt

Features

✔ 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>

<body>

<h1>📘 Student Result Manager</h1>

<h2>Add Student</h2>

<button type="submit">
Add Student
</button>

</form>

</div>

</div>

<table>

<thead>

<tr>

<th>Science</th>

<th>English</th>

<th>Total</th>

<th>Grade</th>

<th>Action</th>

</tr>

</thead>

</tbody>

</table>

</div>

</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.

group 1: Project : Student Result Manager

Project: Student-Result-Manager

Structure:

Features

File 1 : index.html

File 2 (style.css):

File 3: functions.js

File4: students.json

File 5: script.js

File 6: README.txt

About Author

Swarnim Raj

Search Related Topics

File 2 (`style.css`):

File 3: `functions.js`

`File4: students.json`

`File 5: script.js`