A web-based student attendance management system that uses localStorage for data persistence. Perfect for teachers who want to digitize their attendance tracking without needing a server or database.
- Select class and date
- Load students for the selected class
- Mark attendance with Present/Absent buttons
- Real-time attendance summary (Total, Present, Absent)
- Save attendance records
- Add new students with name and class
- Edit student information
- Delete students (with confirmation)
- Search students by name
- Each student belongs to a specific class
- View attendance records by class and date
- See detailed breakdown of present/absent students
- Review historical attendance data
- Generate comprehensive attendance reports
- View statistics: Total Students, Present, Absent, Percentage
- Filter reports by class and date
- Class-wise and date-wise analysis
- All data stored in browser's localStorage
- Data persists even after browser restart
- No server or database required
- Easy to backup and restore
- HTML5 - Page structure and forms
- CSS3 - Responsive and modern UI design
- JavaScript (ES6) - Dynamic functionality and data management
- localStorage - Client-side data persistence
Student-Attendance-System/
│
├── index.html
│
├── pages/
│ ├── dashboard.html
│ ├── students.html
│ ├── history.html
│ └── reports.html
│
├── css/
│ ├── style.css
│ ├── dashboard.css
│ ├── students.css
│ ├── history.css
│ ├── reports.css
│ └── responsive.css
│
├── js/
│ ├── app.js
│ ├── students.js
│ ├── attendance.js
│ └── storage.js
│
├── assets/
│ ├── images/
│ │ ├── logo.png
│ │ ├── hero-image.png
│ │ ├── avatar.png
│ │ └── background.jpg
│ │
│ ├── icons/
│ │ ├── dashboard.svg
│ │ ├── students.svg
│ │ ├── history.svg
│ │ ├── reports.svg
│ │ ├── present.svg
│ │ ├── absent.svg
│ │ ├── search.svg
│ │ └── menu.svg
│ │
│ └── favicon/
│ └── favicon.ico
│
└── README.md