nhcarrigan/static-pages
2
0
Fork 0
generated from nhcarrigan/template
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: nhcarrigan:76749ba6b81e94d08b93345dd64fb5b0d214b8c0
Branches Tags
nhcarrigan:main
..
compare: nhcarrigan:e33df16e43f2de25fa1709b8f28eb38efc16cd30
Branches Tags
nhcarrigan:main

2 Commits
76749ba6b8 ... e33df16e43

Author SHA1 Message Date
Naomi Carrigan
e33df16e43
feat: dynamic button to reset filters
Some checks failed
Code Analysis / SonarQube (push) Failing after 47s
Details
2025-03-24 15:36:17 -07:00
Naomi Carrigan
e6f00559a9
feat: show filtered count when filter is applied 2025-03-24 15:32:35 -07:00
1 changed files with 21 additions and 0 deletions
Show Stats Expand all files Collapse all files

21
music/index.html
View File

@ -22,6 +22,9 @@
<span>Search Titles: </span> <span>Search Titles: </span>
<input type="text" id="title" /> <input type="text" id="title" />
</div> </div>
<div style="display: none;">
<button type="button" id="clear">Clear Filters</button>
</div>
<table id="songs"> <table id="songs">
</table> </table>
@ -30,6 +33,7 @@
<script> <script>
const artistQuery = document.getElementById('artist'); const artistQuery = document.getElementById('artist');
const titleQuery = document.getElementById('title'); const titleQuery = document.getElementById('title');
const resetButton = document.getElementById('clear');
const songTable = document.getElementById('songs'); const songTable = document.getElementById('songs');
const filterSongs = (artist, title) => { const filterSongs = (artist, title) => {
let result = [...songList]; let result = [...songList];
@ -39,10 +43,14 @@
if(title) { if(title) {
result = result.filter(song => song.title.toLowerCase().includes(title.toLowerCase())); result = result.filter(song => song.title.toLowerCase().includes(title.toLowerCase()));
} }
resetButton.parentElement.style.display = artist || title ? "block" : "none";
document.getElementById('count').innerText = artist || title ? `Filtered to ${result.length} songs from ${songList.length}.` : `Naomi currently has ${songList.length} songs.`;
updateTable(result); updateTable(result);
} }
const loadSongs = (songs) => { const loadSongs = (songs) => {
songList.push(...songs); songList.push(...songs);
artistQuery.value = "";
titleQuery.value = "";
artistQuery.parentElement.style.display = "block"; artistQuery.parentElement.style.display = "block";
titleQuery.parentElement.style.display = "block"; titleQuery.parentElement.style.display = "block";
document.getElementById('count').innerText = `Naomi currently has ${songs.length} songs.`; document.getElementById('count').innerText = `Naomi currently has ${songs.length} songs.`;
@ -75,6 +83,11 @@
artistQuery?.addEventListener("input", (e) => filterSongs(e.target.value, titleQuery.value)); artistQuery?.addEventListener("input", (e) => filterSongs(e.target.value, titleQuery.value));
titleQuery?.addEventListener("input", (e) => filterSongs(artistQuery.value, e.target.value)); titleQuery?.addEventListener("input", (e) => filterSongs(artistQuery.value, e.target.value));
resetButton?.addEventListener("click", () => {
artistQuery.value = "";
titleQuery.value = "";
filterSongs("", "");
});
</script> </script>
<style> <style>
table { table {
@ -92,5 +105,13 @@
border-radius:10px; border-radius:10px;
padding:.25rem padding:.25rem
} }
button {
background:var(--foreground);
color:var(--background);
border:1px solid white;
border-radius:10px;
padding:.25rem;
cursor:url('https://cdn.nhcarrigan.com/cursors/pointer.cur'), pointer;
}
</style> </style>
</html> </html>