A

Micro Project Report on

Attendance Management System
T.Y. [Diploma in Computer Engineering]
(SEMESTER V)

Course Name
Client Side Scripting Language (CSS 22519)

Submitted by
1. SAYED SHAD Roll no: 40
2. SAYED NIAHL Roll no: 44
3. SAYED MAAZ Roll no: 35
4. SAYED MANNAN Roll no: 36
5. SAYED SAFI Roll no: 37

Department of Computer Engineering

Jamia Polytechnic
Akkalkuwa – 425415
[2024-25]
 MAHARASHTRA STATE BOARD OF
TECHNICAL EDUCATION

Certificate

This is to certify that Mr. / Ms. ………………………………………

Roll No. ………………………… of Fifth Semester of Diploma in
Computer Engineering of Instite, Jamia Polytechnic, Akkalkuwa,
(Institute Code: 0366) has satisfactorily completed the Micro Project
work in Course Client Side ScriptingLanhuage (CSS-22519) for the
academic year 2024 – 2025 as prescribed in the curriculum.

Place :…………………. Enrollment No……………………

Date : …………………. Exam. Seat No……………………

Subject Teacher Head of the Department Principal

Seal of Institution
 MICRO POROJECT
ATTANDENCE MANGMENT SYSTEM
[PART A]

1.0 Aims/Benefits of the Micro-Project

The aim of this micro-project is to design and implement an Attendance

Management System using HTML, CSS, and JavaScript. The system
allows users to:

Add student names.

Mark attendance by selecting checkboxes.

Store attendance data using local storage for persistence.

This micro-project enhances web development skills, especially in form

handling, DOM manipulation, and local storage usage.

Page 1 of 15
2.0 Course Objectives Fulfilled by the Micro-Project
Develop proficiency in web technologies such as HTML, CSS, and
JavaScript.
Understand the basics of local storage to save and retrieve data.
Create interactive web applications with event-driven programming.
Design user interfaces to manage student data.

3.0 Project Relevance

This project provides a basic yet powerful tool that can be used in
schools, colleges, or organizations to track student attendance. By
leveraging JavaScript, we ensure that data persists through local storage,
providing a simple yet effective solution for attendance tracking without
a backend.

4.0 Lecture Review

During lectures, we learned key JavaScript concepts necessary for this
project: JavaScript Basics: Variables, data types, and functions for
handling user input. DOM Manipulation: Dynamically updating HTML
elements for interactive attendance forms. Event Handling: Capturing
user actions like form submissions. Local Storage: Storing attendance
data persistently in the browser. Validation: Ensuring correct user input
and handling errors. These topics form the foundation for developing the
Attendance Management System.

Page 2 of 15
 6.0 Action Plan (Sequence and time required for major activities for
8-10 Weeks)
Details of activity Planned Planned Name of
S. No. Start date Finish date Responsible Team
Members
1. Analysis 29/07/2024 03/08/2024
2. Study JavaScript: Event Handling and 05/08/2024 10/08/2024
DOM Manipulation
3. Design User Interface for 12/08/2024 17/08/2024
Attendance Management System
4. Develop Algorithm and Create 19/08/2024 24/08/2024
Program Flowchart
5. Coding and testing 02/09/2024 07/09/2024
6. Coding and testing 09/09/2024 14/09/2024

7. Coding and testing 16/09/2024 21/09/2024

8. Coding and testing 23/09/2024 28/09/2024

9. Report writing 30/10/2024 05/10/2024

10. Demo and Submission 07/10/2024 12/10/2024

Page 3 of 15
7.0 Skills Developed

DOM manipulation using JavaScript.

Handling browser local storage.

Creating interactive forms in HTML.

Styling web pages using CSS.

Debugging and error handling in JavaScript.

Submitted by:
1) Sayed Shaad
2) Sayed Nihal
3) Sayed Mannan
4) Md Maaz
5) Sayed Safi

Page 4 of 15
 [PART B]

CONTENTS

1. Rationale
………………………………………………………………..……..
2. Course Outcomes Addressed
…………………………………..……….…..
3. Literature Review
………………………………………………………..……
4. Actual Methodology Followed
…………………………………..………..
5. Actual Resources Required
…………………………………………….…..
6. Output of Micro-Project
………………………………………..……….
7. Skills Developed/Learning from this Micro-Project
…………….……..
8. Applications of this Microproject
………………………………….……..
9. Areas for Future Improvement ………………………………….……..
\

Page 5 of 15
6.1 Introduction

The Attendance Management System is a simple web-based project

designed to manage student attendance records. The system provides an
interface where students can be added, attendance can be marked, and
the data can be stored persistently using local storage.

6.2 Objectives of the Project

To create a simple and interactive attendance management system using

web technologies.

To store and retrieve data using the browser's local storage.

To provide a functional user interface for adding and managing students.

6.3 Software and Tools Used

Languages: HTML, CSS, JavaScript

Development Environment: Browser (Chrome, Firefox, etc.)

Page 6 of 15
Storage: Local Storage API (Browser-based)

6.4 Features of the Project

Add Student: Users can add students to the system by entering their
names.

Mark Attendance: Users can mark attendance for each student by

checking a box.

Local Storage: Attendance data is saved in local storage, ensuring it

persists across browser sessions.

Remove Students: Users can delete students from the list if needed.

7.0 Code and Implementation

Here is the implementation of the Attendance Management System:

7.1 HTML Code

<!DOCTYPE html>
<html lang="en">

Page 7 of 15
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Attendance Management System</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
padding: 20px;
}
h1 {
text-align: center;
}
#studentForm {
margin-bottom: 20px;
}
.student-list {
border: 1px solid #ccc;
padding: 10px;
}
.student-list div {
margin-bottom: 5px;

Page 8 of 15
 }
</style>
</head>
<body>
<h1>Attendance Management System</h1>
<form id="studentForm">
<input type="text" id="name" placeholder="Enter Student Name"
required>
<button type="submit">Add Student</button>
</form>

<h2>Student List</h2>
<div class="student-list" id="studentList"></div>

<script src="script.js"></script>
</body>
</html>

7.2 JavaScript Code

document.addEventListener('DOMContentLoaded', function() {
const studentForm = document.getElementById('studentForm');
const studentList = document.getElementById('studentList');

Page 9 of 15
 let students = JSON.parse(localStorage.getItem('students')) || [];

function displayStudents() {
studentList.innerHTML = '';
students.forEach((student, index) => {
const studentDiv = document.createElement('div');
studentDiv.innerHTML = `
${student.name}
<input type="checkbox" ${student.present ? 'checked' : ''}
onclick="markAttendance(${index})"> Present
<button
onclick="deleteStudent(${index})">Remove</button>
`;
studentList.appendChild(studentDiv);
});
}

studentForm.addEventListener('submit', function(e) {
e.preventDefault();
const name = document.getElementById('name').value;
students.push({ name: name, present: false });
localStorage.setItem('students', JSON.stringify(students));
document.getElementById('name').value = '';
Page 10 of 15
 displayStudents();
});

window.markAttendance = function(index) {
students[index].present = !students[index].present;
localStorage.setItem('students', JSON.stringify(students));
displayStudents();
}

window.deleteStudent = function(index) {
students.splice(index, 1);
localStorage.setItem('students', JSON.stringify(students));
displayStudents();
}

displayStudents();
});

7.3 CSS (Optional for Styling)

body {
font-family: Arial, sans-serif;
background-color: #f8f9fa;

Page 11 of 15
}

form {
margin-bottom: 15px;
}

input[type="text"] {
padding: 5px;
font-size: 16px;
}

button {
padding: 5px 10px;
font-size: 16px;
}

.student-list div {
margin: 10px 0;
padding: 10px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
display: flex;

Page 12 of 15
 justify-content: space-between;
}

8.0 Output
1. Teacher Login

2. Adding Students

A form to enter a student's name and add them to the list.

Page 13 of 15
2. Marking Attendance
The list displays students, each with a checkbox to mark as present.

Page 14 of 15
9.0 Skills Developed

Through this project, the following skills were developed:

Form Handling: Ability to handle form submissions and prevent page

reloads using JavaScript.

DOM Manipulation: Adding, updating, and removing elements

dynamically based on user interactions.

Local Storage: Storing data in the browser's local storage to maintain

persistence of data

Page 15 of 15