Download Attendance Management System -

body background: linear-gradient(145deg, #e9eff7 0%, #dbe3ed 100%); min-height: 100vh; padding: 2rem 1.5rem;

// attach event listeners after rendering document.querySelectorAll('.mark-present').forEach(btn => btn.addEventListener('click', (e) => const empId = btn.getAttribute('data-id'); setAttendanceStatus(empId, 'present'); ); ); document.querySelectorAll('.mark-late').forEach(btn => btn.addEventListener('click', () => const empId = btn.getAttribute('data-id'); setAttendanceStatus(empId, 'late'); ); ); document.querySelectorAll('.mark-absent').forEach(btn => btn.addEventListener('click', () => const empId = btn.getAttribute('data-id'); setAttendanceStatus(empId, 'absent'); ); ); document.querySelectorAll('.delete-emp').forEach(btn => btn.addEventListener('click', () => const empId = btn.getAttribute('data-id'); if (confirm(`Delete employee $empId and all their attendance history?`)) deleteEmployee(empId); ); );

.btn-danger background: #b91c1c; .btn-danger:hover background: #991b1b;

h1 font-size: 2rem; font-weight: 700; background: linear-gradient(135deg, #1A2A3F, #1F4A6E); background-clip: text; -webkit-background-clip: text; color: transparent; letter-spacing: -0.3px; display: inline-flex; align-items: center; gap: 12px; download attendance management system

<!-- Attendance table --> <div class="table-wrapper"> <table id="attendanceTable"> <thead> <tr> <th>Employee ID</th><th>Name</th><th>Today's Status</th><th>Timestamp</th><th>Actions</th> </tr> </thead> <tbody id="tableBody"> <tr><td colspan="5" style="text-align:center;">Loading employee records...</td></tr> </tbody> </table> </div> <footer>✔ Mark attendance: Present / Late / Absent | Data stored locally in your browser (IndexedDB fallback to localStorage) | All records persist until cleared.</footer> </div>

// render table & stats function renderAll() const data = loadData(); const employees, attendanceRecords = data; const today = getTodayDateStr(); // build map for today's status const todayStatusMap = new Map(); attendanceRecords.forEach(rec => if (rec.date === today) todayStatusMap.set(rec.employeeId, status: rec.status, timestamp: rec.timestamp ); ); const tbody = document.getElementById('tableBody'); if (!employees.length) tbody.innerHTML = '<tr><td colspan="5" style="text-align:center;">No employees found. Add some using the form.</td></tr>'; else tbody.innerHTML = ''; employees.forEach(emp => const record = todayStatusMap.get(emp.id); let status = record ? record.status : 'absent'; let timeStr = record ? new Date(record.timestamp).toLocaleTimeString([], hour:'2-digit', minute:'2-digit') : '—'; let statusDisplay = ''; let badgeClass = ''; if (status === 'present') badgeClass = 'status-present'; statusDisplay = '✅ Present'; else if (status === 'late') badgeClass = 'status-late'; statusDisplay = '⏰ Late'; else badgeClass = 'status-absent'; statusDisplay = '❌ Absent';

function loadData() const raw = localStorage.getItem(STORAGE_KEY); if (!raw) // initial demo dataset return getDefaultData(); try !data.attendanceRecords) throw new Error("corrupted"); return data; catch(e) console.warn("invalid data, resetting"); return getDefaultData(); new Date(record

// Add employee logic const addBtn = document.getElementById('addEmployeeBtn'); const nameInput = document.getElementById('empNameInput'); const idInput = document.getElementById('empIdInput');

<script> // ---------- STORAGE MANAGER (localStorage with robust structure) ---------- const STORAGE_KEY = 'solid_attendance_system_v2';

<!-- Stats summary --> <div class="stats-row" id="statsContainer"> <div class="stat-card"><div class="stat-icon">👥</div><div class="stat-info"><h3>Total Employees</h3><div class="stat-number" id="totalEmployees">0</div></div></div> <div class="stat-card"><div class="stat-icon">✅</div><div class="stat-info"><h3>Present Today</h3><div class="stat-number" id="presentToday">0</div></div></div> <div class="stat-card"><div class="stat-icon">⏰</div><div class="stat-info"><h3>Late Today</h3><div class="stat-number" id="lateToday">0</div></div></div> <div class="stat-card"><div class="stat-icon">📅</div><div class="stat-info"><h3>Absent Today</h3><div class="stat-number" id="absentToday">0</div></div></div> </div> minute:'2-digit') : '—'

.status-absent background: #ffe6e5; color: #b91c1c;

// add employee (unique ID check) function addEmployee(id, name) if (!id

@media (max-width: 700px) .dashboard padding: 1.2rem; .action-section flex-direction: column; align-items: stretch; .toolbar justify-content: flex-start; th, td padding: 8px 6px; </style> </head> <body>

// Data model: employees: [ id, name, createdAt ], attendanceRecords: [ employeeId, date, status, timestamp ] // We'll also keep a convenience "today" YYYY-MM-DD logic. function getTodayDateStr() const today = new Date(); return today.toISOString().split('T')[0];