Library Attendance

Library Attendance System

User ID:

body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f4f4f4; } .container { background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); text-align: center; } .input-group { margin-bottom: 15px; } .input-group label { display: block; margin-bottom: 5px; font-weight: bold; } .input-group input[type="text"] { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } .button-group button { padding: 10px 15px; border: none; border-radius: 4px; background-color: #5cb85c; color: white; cursor: pointer; margin: 5px; } .button-group button#checkOutBtn { background-color: #d9534f; } .button-group button:hover { opacity: 0.8; } .status-message { margin-top: 20px; padding: 10px; border-radius: 4px; } .status-message.success { background-color: #dff0d8; color: #3c763d; border: 1px solid #d6e9c6; } .status-message.error { background-color: #f2dede; color: #a94442; border: 1px solid #ebccd1; } document.addEventListener('DOMContentLoaded', () => { const userIdInput = document.getElementById('userId'); const checkInBtn = document.getElementById('checkInBtn'); const checkOutBtn = document.getElementById('checkOutBtn'); const statusDiv = document.getElementById('status'); checkInBtn.addEventListener('click', () => { const userId = userIdInput.value.trim(); if (userId) { checkInUser(userId); } else { setStatus('Please enter User ID.', 'error'); } }); checkOutBtn.addEventListener('click', () => { const userId = userIdInput.value.trim(); if (userId) { checkOutUser(userId); } else { setStatus('Please enter User ID.', 'error'); } }); function checkInUser(userId) { if (localStorage.getItem(userId)) { setStatus('User already checked in.', 'error'); } else { localStorage.setItem(userId, 'checkedIn'); setStatus(`User ${userId} checked in successfully.`, 'success'); } userIdInput.value = ''; } function checkOutUser(userId) { if (localStorage.getItem(userId)) { localStorage.removeItem(userId); setStatus(`User ${userId} checked out successfully.`, 'success'); } else { setStatus('User not checked in.', 'error'); } userIdInput.value = ''; } function setStatus(message, type = 'default') { statusDiv.textContent = message; statusDiv.className = 'status-message'; if (type === 'success') { statusDiv.classList.add('success'); } else if (type === 'error') { statusDiv.classList.add('error'); } } });