To create a functional website for tracking library attendance, we need to implement the following: 1. **Frontend**: The HTML and CSS are already provided, so we'll focus on adding interactivity using JavaScript. 2. **Backend**: Since this is running in a browser environment (WebContainer), we can use `localStorage` to persist attendance records locally. Here's the complete artifact that includes the frontend and backend logic: ```xml Library Attendance

Dulangan National High School Library Attendance

Library Attendance

Attendance Records

Student ID	Student Name	Time

// Script to handle library attendance logging const form = document.getElementById('attendanceForm'); const tableBody = document.querySelector('#attendanceTable tbody'); // Load existing attendance records from localStorage let attendanceRecords = JSON.parse(localStorage.getItem('attendanceRecords')) || []; function renderAttendanceRecords() { tableBody.innerHTML = ''; // Clear existing rows attendanceRecords.forEach(record => { const row = document.createElement('tr'); row.innerHTML = ` ${record.studentId} ${record.studentName} ${record.time} `; tableBody.appendChild(row); }); } // Handle form submission form.addEventListener('submit', (event) => { event.preventDefault(); const studentId = document.getElementById('studentId').value.trim(); const studentName = document.getElementById('studentName').value.trim(); if (!studentId || !studentName) { alert('Please fill in both Student ID and Student Name.'); return; } // Create new attendance record const newRecord = { studentId, studentName, time: new Date().toLocaleString() }; // Add to records array attendanceRecords.push(newRecord); // Save to localStorage localStorage.setItem('attendanceRecords', JSON.stringify(attendanceRecords)); // Clear form inputs form.reset(); // Render updated records renderAttendanceRecords(); }); // Initial rendering of attendance records renderAttendanceRecords(); ``` ### Explanation: 1. **HTML (`index.html`)**: - The structure remains unchanged. It defines the form for logging attendance and a table for displaying records. 2. **JavaScript (`script.js`)**: - **Loading Records**: The script retrieves attendance records from `localStorage` or initializes an empty array if no records exist. - **Rendering Records**: The `renderAttendanceRecords` function dynamically generates table rows based on the attendance records. - **Form Submission**: When the form is submitted: - It validates that both `Student ID` and `Student Name` are filled. - It creates a new attendance record with the current timestamp. - It saves the updated records to `localStorage`. - It clears the form inputs and re-renders the table. 3. **Persistence**: Attendance records are stored in `localStorage`, ensuring they persist across page reloads. This setup provides a simple yet functional library attendance system that works entirely within the browser. You can open `index.html` in your browser to test it.