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:e33df16e43f2de25fa1709b8f28eb38efc16cd30
Branches Tags
nhcarrigan:main
..
compare: nhcarrigan:76749ba6b81e94d08b93345dd64fb5b0d214b8c0
Branches Tags
nhcarrigan:main

No commits in common. "e33df16e43f2de25fa1709b8f28eb38efc16cd30" and "76749ba6b81e94d08b93345dd64fb5b0d214b8c0" have entirely different histories.
e33df16e43 ... 76749ba6b8

1 changed files with 0 additions and 21 deletions
Show Stats Expand all files Collapse all files

21
music/index.html
View File

@ -22,9 +22,6 @@
<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>
@ -33,7 +30,6 @@
<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];
@ -43,14 +39,10 @@
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.`;
@ -83,11 +75,6 @@
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 {
@ -105,13 +92,5 @@
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>