JIT

Attendance Grading System HTML CSS Fix Style Animation

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Attendance & Grading System</title>
  <link rel="stylesheet" href="./asd.style.css">
</head>
<script>
    document.addEventListener("DOMContentLoaded", function() {

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 saveButton = document.getElementById('save-button'); const userIdInput = document.getElementById('user-id'); const userRoleSelect = document.getElementById('user-role'); const loggedInUserSpan = document.getElementById('logged-in-user'); const loggedInRoleSpan = document.getElementById('logged-in-role'); const studentsTbody = document.getElementById('students-tbody'); const saveStatus = document.getElementById('save-status'); const recordDateInput = document.getElementById('record-date'); const loginError = document.getElementById('login-error');

let currentUser = null;

// Sample student data for demonstration purposes const students = [ { id: 1, name: "John Doe" }, { id: 2, name: "Jane Smith" }, { id: 3, name: "Bob Brown" } ];

// Load student records into the table function loadStudentRecords() { studentsTbody.innerHTML = ''; students.forEach(student => { const row = document.createElement('tr'); row.innerHTML = <td>${student.id}</td> <td>${student.name}</td> <td><input type="checkbox" class="attendance"></td> <td><input type="number" class="quiz" min="0" max="100"></td> <td><input type="number" class="long-quiz" min="0" max="100"></td> <td><input type="number" class="recitation" min="0" max="100"></td> ; studentsTbody.appendChild(row); }); }

// Handle login functionality loginButton.addEventListener('click', function() { const userId = userIdInput.value.trim(); const userRole = userRoleSelect.value;

if (userId && userRole) {
  currentUser = { id: userId, role: userRole };
  loggedInUserSpan.textContent = userId;
  loggedInRoleSpan.textContent = userRole;

  // Hide login and show app container
  loginContainer.style.display = 'none';
  appContainer.style.display = 'block';

  loadStudentRecords(); // Load student records after login
} else {
  loginError.textContent = "Please provide both User ID and Role.";
}

});

// Handle logout functionality logoutButton.addEventListener('click', function() { currentUser = null; userIdInput.value = ''; userRoleSelect.value = 'teacher'; loginError.textContent = '';

loginContainer.style.display = 'block';
appContainer.style.display = 'none';

});

// Save student records saveButton.addEventListener('click', function() { const recordDate = recordDateInput.value;

if (!recordDate) {
  saveStatus.textContent = 'Please select a date for the record.';
  return;
}

// Collect student data from the table
const studentRecords = [];
const rows = studentsTbody.rows;
for (let i = 0; i < rows.length; i++) {
  const row = rows[i];
  const studentId = row.cells[0].textContent;
  const attendance = row.querySelector('.attendance').checked ? 1 : 0;
  const quiz = row.querySelector('.quiz').value || 0;
  const longQuiz = row.querySelector('.long-quiz').value || 0;
  const recitation = row.querySelector('.recitation').value || 0;

  studentRecords.push({ studentId, attendance, quiz, longQuiz, recitation });
}

// Simulate saving the data
setTimeout(function() {
  saveStatus.textContent = `Records for ${recordDate} have been saved successfully.`;
}, 1000);

}); });

</script>
<body>
  <div id="login-container">
    <h2>Login</h2>
    <label for="user-id">User ID:</label>
    <input type="text" id="user-id" required>
    <label for="user-role">Role:</label>
    <select id="user-role">
      <option value="teacher">Teacher</option>
      <option value="mayor">Mayor</option>
    </select>
    <button id="login-button">Login</button>
    <p id="login-error" class="error-message"></p>
  </div>

  <div id="app-container" style="display: none;">
    <header>
      <h1>Class Record</h1>
      <div id="user-info">
        Logged in as: <span id="logged-in-user"></span> (<span id="logged-in-role"></span>)
        <button id="logout-button">Logout</button>
      </div>
    </header>

    <main>
      <h2>Student Records</h2>
      <label for="record-date">Date:</label>
      <input type="date" id="record-date">
      <table id="students-table">
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Attendance</th>
            <th>Quiz</th>
            <th>Long Quiz</th>
            <th>Recitation</th>
          </tr>
        </thead>
        <tbody id="students-tbody">
          <!-- Student rows will be generated by JavaScript -->
        </tbody>
      </table>
      <button id="save-button">Save Records for Date</button>
      <p id="save-status" class="status-message"></p>
    </main>
  </div>

  <script src="script.js"></script>
</body>
</html>

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; } fix create the choose the section and fix the css style and animations

Gemini 2.5 Pro

Okay, I will separate the HTML, CSS, and JavaScript into their respective files and ensure they are linked correctly.

Google

Gemini 2.5 Pro

https://preview-ixvzyu--wcg-ge.app.jit.dev

Console

000

No logs available to display