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

feat: dynamic button to reset filters
Some checks failed
Code Analysis / SonarQube (push) Failing after 47s
Details

Browse Source
This commit is contained in:
Naomi Carrigan 2025-03-24 15:36:17 -07:00
parent e6f00559a9
commit e33df16e43
Signed by: naomi
SSH Key Fingerprint: SHA256:rca1iUI2OhAM6n4FIUaFcZcicmri0jgocqKiTTAfrt8
1 changed files with 21 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
music/index.html
View File

@ -22,6 +22,9 @@
<span>Search Titles: </span>
<input type="text" id="title" />
</div>
<div style="display: none;">
<button type="button" id="clear">Clear Filters</button>
</div>
<table id="songs">
</table>
@ -30,6 +33,7 @@
<script>
const artistQuery = document.getElementById('artist');
const titleQuery = document.getElementById('title');
const resetButton = document.getElementById('clear');
const songTable = document.getElementById('songs');
const filterSongs = (artist, title) => {
let result = [...songList];
@ -39,11 +43,14 @@
if(title) {
result = result.filter(song => song.title.toLowerCase().includes(title.toLowerCase()));
}
document.getElementById('count').innerText = `Filtered to ${result.length} songs from ${songList.length}.`;
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);
}
const loadSongs = (songs) => {
songList.push(...songs);
artistQuery.value = "";
titleQuery.value = "";
artistQuery.parentElement.style.display = "block";
titleQuery.parentElement.style.display = "block";
document.getElementById('count').innerText = `Naomi currently has ${songs.length} songs.`;
@ -76,6 +83,11 @@
artistQuery?.addEventListener("input", (e) => filterSongs(e.target.value, titleQuery.value));
titleQuery?.addEventListener("input", (e) => filterSongs(artistQuery.value, e.target.value));
resetButton?.addEventListener("click", () => {
artistQuery.value = "";
titleQuery.value = "";
filterSongs("", "");
});
</script>
<style>
table {
@ -93,5 +105,13 @@
border-radius:10px;
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>
</html>