From e33df16e43f2de25fa1709b8f28eb38efc16cd30 Mon Sep 17 00:00:00 2001
From: Naomi Carrigan <commits@nhcarrigan.com>
Date: Mon, 24 Mar 2025 15:36:17 -0700
Subject: [PATCH] feat: dynamic button to reset filters

---
 music/index.html | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/music/index.html b/music/index.html
index b3c7e79..aa4e4ae 100644
--- a/music/index.html
+++ b/music/index.html
@@ -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>
\ No newline at end of file