-
Notifications
You must be signed in to change notification settings - Fork 0
/
testing.html
126 lines (112 loc) · 3.86 KB
/
testing.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html>
<head>
<title>Student Attendance</title>
<style>
ul {
list-style-type: none;
padding: 0;
}
li {
margin: 10px 0;
display: flex;
align-items: center;
}
.present, .absent {
background-color: white;
border: 1px solid #ccc;
padding: 5px;
cursor: pointer;
}
.present.active {
background-color: green;
}
.absent.active {
background-color: red;
}
</style>
</head>
<body>
<h1>Student Attendance</h1>
<div id="add-student">
<input type="text" id="student-name" placeholder="Enter student name">
<button id="add-student-btn">Add Student</button>
</div>
<ul id="student-list">
<!-- Students will be added here dynamically using JavaScript -->
</ul>
<div>
<p>Present: <span id="present-count">0</span></p>
<p>Absent: <span id="absent-count">0</span></p>
</div>
<a id="download-link" style="display: none;" download="attendance.csv">Download Attendance</a>
<script>
const studentList = document.getElementById("student-list");
const presentCountElement = document.getElementById("present-count");
const absentCountElement = document.getElementById("absent-count");
const downloadLink = document.getElementById("download-link");
const addStudentBtn = document.getElementById("add-student-btn");
const studentNameInput = document.getElementById("student-name");
let presentCount = 0;
let absentCount = 0;
function updateCounts() {
presentCountElement.textContent = presentCount;
absentCountElement.textContent = absentCount;
}
function toggleAttendance(button, isPresent) {
if (button.classList.contains("active")) {
button.classList.remove("active");
isPresent ? presentCount-- : absentCount--;
} else {
button.classList.add("active");
isPresent ? presentCount++ : absentCount++;
}
updateCounts();
}
function createStudentElement(studentName) {
const li = document.createElement("li");
const buttonPresent = document.createElement("div");
buttonPresent.className = "present";
buttonPresent.textContent = "Present";
buttonPresent.addEventListener("click", () => {
toggleAttendance(buttonPresent, true);
});
const buttonAbsent = document.createElement("div");
buttonAbsent.className = "absent";
buttonAbsent.textContent = "Absent";
buttonAbsent.addEventListener("click", () => {
toggleAttendance(buttonAbsent, false);
});
li.textContent = studentName;
li.appendChild(buttonPresent);
li.appendChild(buttonAbsent);
studentList.appendChild(li);
}
addStudentBtn.addEventListener("click", () => {
const studentName = studentNameInput.value.trim();
if (studentName) {
createStudentElement(studentName);
studentNameInput.value = "";
}
});
// Function to export attendance data as CSV
function exportAttendance() {
const students = Array.from(studentList.querySelectorAll("li")).map(studentElement => studentElement.textContent);
const attendanceData = students.map(student => ({
Student: student,
Attendance: presentCount > 0 ? "Present" : "Absent",
}));
const csv = [
Object.keys(attendanceData[0]).join(","),
...attendanceData.map(student => Object.values(student).join(",")),
].join("\n");
const blob = new Blob([csv], { type: "text/csv" });
const url = URL.createObjectURL(blob);
downloadLink.href = url;
downloadLink.style.display = "block";
}
// Event listener to export attendance data
downloadLink.addEventListener("click", exportAttendance);
</script>
</body>
</html>