Animated Attendance Manager - Copy this Html, Bootstrap Component to your project
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <title>Attendance Management System</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <h1>Attendance Management System</h1> <form id="attendance form"> <input type="text" id="name" placeholder="Enter Name" required> <input type="date" id="date" required> <select id="status" required> <option value="" disabled selected>Select Status</option> <option value="Present">Present</option> <option value="Absent">Absent</option> </select> <button type="submit">Add Attendance</button> </form> <table id="attendance table"> <thead> <tr> <th>Name</th> <th>Date</th> <th>Status</th> <th>Action</th> </tr> </thead> <tbody> <! Attendance records will be added here > </tbody> </table> </div> <script> document.getElementById('attendance form').addEventListener('submit', function(e) { e.preventDefault(); const name = document.getElementById('name').value; const date = document.getElementById('date').value; const status = document.getElementById('status').value; if (name && date && status) { addAttendanceRecord(name, date, status); document.getElementById('attendance form').reset(); } }); function addAttendanceRecord(name, date, status) { const tableBody = document.querySelector('#attendance table tbody'); const newRow = document.createElement('tr'); newRow.classList.add('new record'); const nameCell = document.createElement('td'); nameCell.textContent = name; newRow.appendChild(nameCell); const dateCell = document.createElement('td'); dateCell.textContent = date; newRow.appendChild(dateCell); const statusCell = document.createElement('td'); statusCell.textContent = status; newRow.appendChild(statusCell); const actionCell = document.createElement('td'); const deleteButton = document.createElement('button'); deleteButton.textContent = 'Delete'; deleteButton.classList.add('delete btn'); deleteButton.addEventListener('click', () => { tableBody.removeChild(newRow); }); actionCell.appendChild(deleteButton); newRow.appendChild(actionCell); tableBody.appendChild(newRow); setTimeout(() => { newRow.classList.remove('new record'); }, 2000); } </script> </body> </html> in this code add advanced animation and transition effect
