A web-based QR code attendance management system designed for classrooms and labs.
The application provides Teacher and Student dashboards, QR-based attendance marking, and a clean, interactive UI.
This project is a frontend-only prototype built using HTML, CSS, and JavaScript to demonstrate session handling, UI logic, and data export.
- Create or change attendance sessions (subject & date)
- Generate QR code for the active session
- View live attendance table
- Search students by name
- Filter by present / absent status
- Manually mark attendance
- Download attendance data as CSV
- Select student name
- Scan QR (simulated) using modal
- Mark attendance for active session
- View personal attendance history
- Dark mode toggle
- Profile page (role-based view)
- Settings page
- Responsive card-based layout
- Sticky navigation bar
- Teacher starts an attendance session
- System generates a QR code for the session
- Student selects their name and scans the QR
- Attendance is marked as Present
- Teacher can review and export records
Note: QR scanning is simulated for academic demonstration purposes.
- HTML5 – Structure
- CSS3 – Styling & Dark mode
- JavaScript (Vanilla) – Application logic
- QRCode.js (CDN) – QR generation
- Blob API – CSV export
No backend or database is used.
eclipse-attendance-app/
├── index.html
├── README.md
└── LICENSE
- Student list is preloaded
- Attendance stored in JavaScript objects
- Session-wise attendance history
- Data resets on page refresh
- CSV export supported
- No real QR scanning (camera not used)
- No authentication system
- No backend or database
- Data is not persistent
These are intentional for a frontend-only prototype.
- Real QR scanning via device camera
- Backend integration (Node.js / Firebase)
- User authentication (Teacher / Student)
- Persistent cloud storage
- Mobile PWA support
PADAKANTI HARSHITH
Computer Science & Engineering Student
This project is licensed under the MIT License.