Attendance Tracker Component - Copy this Angular, Tailwind Component to your project
<!DOCTYPE html> <html ng app="attendanceApp"> <head> <title>Attendance Tracker</title> <link rel="stylesheet" href="styles.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body> <div ng controller="MainController"> <h2>Attendance Tracker</h2> <button ng click="markAllAbsent()">Mark All Absent</button> <p><strong>Summary:</strong> {{ getSummary() }}</p> <table class="attendance records" border="1"> <thead> <tr> <th>Name</th> <th>Status</th> <th>Mark Present</th> </tr> </thead> <tbody> <tr ng repeat="student in students"> <td>{{ student.name }}</td> <td>{{ student.status }}</td> <td><button ng click="markPresent($index)">Toggle</button></td> </tr> </tbody> </table> </div> <script src="app.js"></script> </body> </html>body { font family: system ui, apple system, BlinkMacSystemFont, sans serif; padding: 30px; } .attendance records { border collapse: collapse; } .attendance records td { padding: 10px 20px; } button { background: #eb969c; color: #fff; border: none; padding: 5px 15px; border radius: 4px; box shadow: 1px 2px 1px 1px #ececec; cursor: pointer; } button:hover { background: #d8868c; }angular.module('attendanceApp', []) .controller('MainController', function($scope) { $scope.students = [ { name: "Amit", status: "Present" }, { name: "Beena", status: "Present" }, { name: "Chung", status: "Absent" }, { name: "Deeba", status: "Absent" }, { name: "Esha", status: "Absent" } ]; // Fixed the markAllAbsent function $scope.markAllAbsent = function() { $scope.students.forEach(function(student) { student.status = "Absent"; }); }; // Improved to toggle status instead of hard setting to Present $scope.markPresent = function(index) { $scope.students[index].status = $scope.students[index].status === "Present" ? "Absent" : "Present"; }; // Implemented the summary function $scope.getSummary = function() { const presentCount = $scope.students.filter(s => s.status === "Present").length; const absentCount = $scope.students.length presentCount; return `${presentCount} Present, ${absentCount} Absent`; }; });
