Students Attendance Management System
A lightweight, dependency-free web app for tutors to register students and mark daily attendance. Runs entirely in the browser — no server or build step needed.
🔗 Live demo: https://agunechemba.name.ng/students-attendance-management-system/
Demo login: ekene / ekene
Features
- Tutor login with a session guard
- Add students (name, phone, city, roll number) with duplicate-roll protection
- Mark attendance as Present or Absent (toggle to clear)
- Delete students and search by name, city, phone or roll number
- Live counters for total / present / absent
- Data persisted in
localStorage, with automatic migration from the old key - Responsive layout and accessible markup
Tech Stack
HTML5 · CSS3 · Vanilla JavaScript (ES2020+) — no framework, no dependencies.
Run Locally
git clone https://github.com/agunechemba/students-attendance-management-system
cd students-attendance-management-system
npx serve . # or: python3 -m http.server 8000
Then open the URL shown by the server. Use a local server rather than file://
so that localStorage works correctly.
Project Structure
├── index.html # Login page
├── student.html # Attendance dashboard
├── style.css # All styles
├── index.js # Login logic
├── student.js # Dashboard logic
└── tech23.jpg # Login illustration
⚠️ Security Note
Authentication is client-side only — the credentials are visible in
index.js. This is fine for a classroom demo but not for production use. A
real deployment requires a backend with hashed passwords and server-issued
sessions.
Contributing
Fork the repo, create a feature branch and open a pull request.
License
MIT — see LICENSE for details.