Student Record System

Okay, let's create the basic structure for the student record system using HTML, CSS, and JavaScript. This will include a login interface and a placeholder for displaying student records. Student Record System body { font-family: sans-serif; margin: 20px; background-color: #f4f4f4; } #login-container, #records-container { background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); max-width: 600px; margin: 40px auto; } h2 { text-align: center; color: #333; margin-bottom: 20px; } .form-group { margin-bottom: 15px; } .form-group label { display: block; margin-bottom: 5px; color: #555; } .form-group input { width: calc(100% - 12px); padding: 8px; border: 1px solid #ccc; border-radius: 4px; } button { background-color: #007bff; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; display: block; width: 100%; margin-top: 10px; } button:hover { background-color: #0056b3; } #logout-button { background-color: #dc3545; margin-top: 20px; } #logout-button:hover { background-color: #c82333; } .error-message { color: red; text-align: center; margin-top: 10px; min-height: 1em; /* Prevent layout shift */ } #records-table { width: 100%; border-collapse: collapse; margin-top: 20px; } #records-table th, #records-table td { border: 1px solid #ddd; padding: 8px; text-align: left; } #records-table th { background-color: #f2f2f2; color: #333; } #records-table tbody tr:nth-child(even) { background-color: #f9f9f9; } #user-info { text-align: right; margin-bottom: 15px; font-style: italic; color: #555; } // --- DOM Elements --- const loginContainer = document.getElementById('login-container'); const recordsContainer = document.getElementById('records-container'); const loginForm = document.getElementById('login-form'); const userIdInput = document.getElementById('userId'); const passwordInput = document.getElementById('password'); const loginError = document.getElementById('login-error'); const recordsBody = document.getElementById('records-body'); const userInfoDisplay = document.getElementById('user-info'); const logoutButton = document.getElementById('logout-button'); // --- Sample Data --- // In a real application, this would come from a server/database const users = { 'teacher1': { password: 'password123', role: 'Teacher' }, 'mayor1': { password: 'adminpassword', role: 'Mayor/Admin' } }; const studentData = [ { name: 'Alice Smith', quiz1: 85, quiz2: 90, longQuiz: 88, recitation: 92, attendance: 95 }, { name: 'Bob Johnson', quiz1: 78, quiz2: 82, longQuiz: 80, recitation: 85, attendance: 98 }, { name: 'Charlie Brown', quiz1: 92, quiz2: 88, longQuiz: 95, recitation: 90, attendance: 90 }, { name: 'Diana Prince', quiz1: 70, quiz2: 75, longQuiz: 72, recitation: 80, attendance: 100 }, ]; // --- Functions --- function displayStudentRecords() { recordsBody.innerHTML = ''; // Clear existing rows studentData.forEach(student => { const row = document.createElement('tr'); row.innerHTML = ` ${student.name} ${student.quiz1 !== undefined ? student.quiz1 : 'N/A'} ${student.quiz2 !== undefined ? student.quiz2 : 'N/A'} ${student.longQuiz !== undefined ? student.longQuiz : 'N/A'} ${student.recitation !== undefined ? student.recitation : 'N/A'} ${student.attendance !== undefined ? student.attendance : 'N/A'} `; recordsBody.appendChild(row); }); } function handleLogin(event) { event.preventDefault(); // Prevent form submission reloading the page const userId = userIdInput.value.trim(); const password = passwordInput.value; loginError.textContent = ''; // Clear previous errors const user = users[userId]; if (user && user.password === password) { // Login successful loginContainer.style.display = 'none'; recordsContainer.style.display = 'block'; userInfoDisplay.textContent = `Logged in as: ${userId} (${user.role})`; displayStudentRecords(); } else { // Login failed loginError.textContent = 'Invalid User ID or Password.'; } } function handleLogout() { loginContainer.style.display = 'block'; recordsContainer.style.display = 'none'; loginForm.reset(); // Clear login form fields loginError.textContent = ''; // Clear any previous login errors userInfoDisplay.textContent = ''; // Clear user info recordsBody.innerHTML = ''; // Clear table data } // --- Event Listeners --- loginForm.addEventListener('submit', handleLogin); logoutButton.addEventListener('click', handleLogout); This sets up the basic HTML structure, CSS styling, and JavaScript logic for login and displaying static student data. You can open `index.html` to see the login form. **Login Credentials (Example):** * User ID: `teacher1`, Password: `password123` * User ID: `mayor1`, Password: `adminpassword`

Login

Student Records