Attendance & Grading System

Okay, I can help you set up the basic structure for an attendance and grading system using HTML, CSS, and JavaScript. This version will use browser `localStorage` for simplicity, which means data will be stored only on the user's current browser. For a real multi-user system, a proper backend database would be required. Attendance & Grading System body { font-family: sans-serif; margin: 0; padding: 20px; background-color: #f4f4f4; } #login-container, #app-container { background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); max-width: 800px; margin: 20px auto; } #login-container { max-width: 400px; } h1, h2 { color: #333; text-align: center; margin-bottom: 20px; } label { display: block; margin-bottom: 5px; font-weight: bold; } input[type="text"], input[type="date"], select, input[type="number"] { width: calc(100% - 22px); /* Adjust for padding/border */ padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; /* Include padding and border in the element's total width and height */ } button { background-color: #5cb85c; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; font-size: 1em; margin-right: 5px; } button:hover { background-color: #4cae4c; } #logout-button { background-color: #d9534f; } #logout-button:hover { background-color: #c9302c; } header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 20px; } #user-info { font-size: 0.9em; } table { width: 100%; border-collapse: collapse; margin-top: 20px; margin-bottom: 20px; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #f2f2f2; font-weight: bold; } td input[type="number"], td select { width: 80px; /* Smaller inputs within table */ padding: 5px; margin: 0; } .error-message { color: red; font-size: 0.9em; margin-top: 10px; } .status-message { color: green; font-size: 0.9em; margin-top: 10px; } #record-date { width: auto; /* Allow date input to size naturally */ margin-bottom: 15px; } document.addEventListener('DOMContentLoaded', () => { // --- DOM Elements --- const loginContainer = document.getElementById('login-container'); const appContainer = document.getElementById('app-container'); const loginButton = document.getElementById('login-button'); const logoutButton = document.getElementById('logout-button'); const userIdInput = document.getElementById('user-id'); const userRoleSelect = document.getElementById('user-role'); const loginError = document.getElementById('login-error'); const loggedInUserSpan = document.getElementById('logged-in-user'); const loggedInRoleSpan = document.getElementById('logged-in-role'); const studentsTbody = document.getElementById('students-tbody'); const saveButton = document.getElementById('save-button'); const saveStatus = document.getElementById('save-status'); const recordDateInput = document.getElementById('record-date'); // --- Sample Data & State --- const validUsers = { 'teacher1': { role: 'teacher', name: 'Prof. Smith' }, 'mayor1': { role: 'mayor', name: 'Class Mayor A' }, // Add more valid users here }; // Use localStorage for persistence (simple demo) let studentData = JSON.parse(localStorage.getItem('studentData')) || [ { id: '2024-001', name: 'Alice', records: {} }, { id: '2024-002', name: 'Bob', records: {} }, { id: '2024-003', name: 'Charlie', records: {} }, { id: '2024-004', name: 'David', records: {} }, // Add more students here ]; let currentUser = null; // { id: '...', role: '...', name: '...' } // --- Functions --- function saveToLocalStorage() { localStorage.setItem('studentData', JSON.stringify(studentData)); } function renderStudentTable(selectedDate) { studentsTbody.innerHTML = ''; // Clear existing rows if (!selectedDate) { studentsTbody.innerHTML = 'Please select a date.'; return; } studentData.forEach(student => { const row = document.createElement('tr'); row.dataset.studentId = student.id; // Store student ID on the row const studentRecordsForDate = student.records[selectedDate] || { attendance: 'present', // Default quiz: '', longQuiz: '', recitation: '' }; row.innerHTML = ` ${student.id} ${student.name} `; studentsTbody.appendChild(row); }); } function handleLogin() { const userId = userIdInput.value.trim(); const userRole = userRoleSelect.value; loginError.textContent = ''; // Clear previous errors if (!userId) { loginError.textContent = 'Please enter a User ID.'; return; } const user = validUsers[userId]; if (user && user.role === userRole) { currentUser = { id: userId, role: userRole, name: user.name }; sessionStorage.setItem('currentUser', JSON.stringify(currentUser)); // Use sessionStorage for login state showApp(); } else { loginError.textContent = 'Invalid User ID or Role.'; } } function handleLogout() { currentUser = null; sessionStorage.removeItem('currentUser'); showLogin(); } function showLogin() { loginContainer.style.display = 'block'; appContainer.style.display = 'none'; userIdInput.value = ''; // Clear input on logout/show loginError.textContent = ''; saveStatus.textContent = ''; } function showApp() { loginContainer.style.display = 'none'; appContainer.style.display = 'block'; loggedInUserSpan.textContent = currentUser.name; loggedInRoleSpan.textContent = currentUser.role; // Set default date to today const today = new Date().toISOString().split('T')[0]; recordDateInput.value = today; renderStudentTable(today); // Render table for today's date initially } function handleSave() { const selectedDate = recordDateInput.value; if (!selectedDate) { saveStatus.textContent = 'Please select a date before saving.'; saveStatus.className = 'error-message'; return; } saveStatus.textContent = ''; // Clear previous status saveStatus.className = 'status-message'; // Reset class const rows = studentsTbody.querySelectorAll('tr'); rows.forEach(row => { const studentId = row.dataset.studentId; if (!studentId) return; // Skip if row doesn't have student ID const student = studentData.find(s => s.id === studentId); if (student) { // Ensure the date key exists in the student's records if (!student.records[selectedDate]) { student.records[selectedDate] = {}; } // Get values from inputs const attendance = row.querySelector('.attendance-input').value; const quiz = row.querySelector('.quiz-input').value; const longQuiz = row.querySelector('.long-quiz-input').value; const recitation = row.querySelector('.recitation-input').value; // Update the student's record for the selected date student.records[selectedDate] = { attendance: attendance, quiz: quiz ? parseFloat(quiz) : '', // Store as number or empty string longQuiz: longQuiz ? parseFloat(longQuiz) : '', recitation: recitation ? parseFloat(recitation) : '' }; } }); saveToLocalStorage(); saveStatus.textContent = `Records for ${selectedDate} saved successfully!`; // Optionally re-render to confirm, though not strictly necessary here // renderStudentTable(selectedDate); } // --- Event Listeners --- loginButton.addEventListener('click', handleLogin); logoutButton.addEventListener('click', handleLogout); saveButton.addEventListener('click', handleSave); recordDateInput.addEventListener('change', (event) => { renderStudentTable(event.target.value); saveStatus.textContent = ''; // Clear save status when date changes }); // --- Initial Check --- const storedUser = sessionStorage.getItem('currentUser'); if (storedUser) { currentUser = JSON.parse(storedUser); showApp(); } else { showLogin(); } }); This sets up the basic HTML structure, CSS styling, and JavaScript logic for: 1. A login screen requiring a User ID and Role. 2. An application screen (shown after login) displaying the logged-in user. 3. A table to display student records. 4. Inputs for selecting the date, marking attendance (Present, Absent, Late), and entering scores for Quiz, Long Quiz, and Recitation for the selected date. 5. Saving the entered data for the selected date into the browser's `localStorage`. 6. Basic user authentication (using hardcoded values in `script.js`). 7. Session persistence (if you close the tab and reopen, you might still be logged in via `sessionStorage`). Remember the limitations: data is stored locally in the browser and is not secure or suitable for multiple users accessing the same data pool unless they are on the same browser instance.

Class Record

Student Records