generated from nighthawkcoders/Nighthawk-Pages
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstats.html
129 lines (122 loc) · 4.45 KB
/
stats.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
127
128
129
---
layout: default
search_exclude: true
permalink: /stats/
---
<link rel="stylesheet" href="{{site.baseurl}}/assets/stats/styles.css">
<script>
document.addEventListener('DOMContentLoaded', function () {
const table = document.getElementById('students');
const input = document.querySelector('input');
function search() {
const searchText = input.value.trim().toLowerCase();
const rows = table.querySelectorAll('tr');
for (let i = rows.length - 1; i >= 1; i--) {
const row = rows[i];
const studentName = row.querySelector('td:nth-child(2)').textContent.trim().toLowerCase();
if (studentName.includes(searchText)) {
row.style.display = '';
} else {
row.style.display = 'none';
}
}
}
function removeSelectedRows() {
const selectedCheckboxes = table.querySelectorAll('input[type="checkbox"]:checked');
selectedCheckboxes.forEach(checkbox => {
const row = checkbox.closest('tr');
row.remove();
});
}
input.addEventListener('input', search);
const removeButton = document.querySelector('input[type="submit"]');
removeButton.addEventListener('click', function (e) {
e.preventDefault();
removeSelectedRows();
});
});
</script>
<!--<script src="{{site.baseurl}}/assets/stats/stats.js" type="module"></script>-->
<body>
<div class="container">
<h2>See your song statistics</h2>
<form action="#">
<div class="input-group">
<input type="input" placeholder="Enter student name">
</div>
<div class="input-group" >
<input type="submit" value="Remove">
</div>
</form>
<table id = "students">
<thead>
<tr>
<th>[X]</th>
<th>Student Name</th>
<th>Song Name</th>
<th>Song Genre</th>
<th>Time of Upload</th>
<th>Date of Upload</th>
</tr>
</thead>
<tbody id="theSongs">
<tr>
<td><input type="checkbox"></td>
<td>Ishi</td>
<td>Cut to the Feeling</td>
<td>Canadian Pop, Dance Pop, Pop</td>
<td>12:00</td>
<td>2023-10-10</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>AJ</td>
<td>Cut to the Feeling</td>
<td>Canadian Pop, Dance Pop, Pop</td>
<td>12:00</td>
<td>2023-10-10</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Toby</td>
<td>Cut to the Feeling</td>
<td>Canadian Pop, Dance Pop, Pop</td>
<td>12:00</td>
<td>2023-10-10</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Aiden</td>
<td>Cut to the Feeling</td>
<td>Canadian Pop, Dance Pop, Pop</td>
<td>12:00</td>
<td>2023-10-10</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Edwin</td>
<td>Cut to the Feeling</td>
<td>Canadian Pop, Dance Pop, Pop</td>
<td>12:00</td>
<td>2023-10-10</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Adi</td>
<td>Cut to the Feeling</td>
<td>Canadian Pop, Dance Pop, Pop</td>
<td>12:00</td>
<td>2023-10-10</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Ryan</td>
<td>Cut to the Feeling</td>
<td>Canadian Pop, Dance Pop, Pop</td>
<td>12:00</td>
<td>2023-10-10</td>
</tr>
</tbody>
</table>
</div>
</body>