Neue Schaltfläche hinzugefügt

Die neue Schaltfläche löscht das Formular (alle Checkboxen und das Textfeld für den Suchbegriff)

index.html

@@ -65,6 +65,21 @@
       background-color: #2980b9;
     }
 
+    #resetButton {
+      padding: 0.75rem 2rem;
+      font-size: 1rem;
+      background-color: #3498db;
+      color: white;
+      border: none;
+      border-radius: 5px;
+      cursor: pointer;
+      transition: background-color 0.3s ease;
+    }
+
+    #resetButton:hover {
+      background-color: #2980b9;
+    }
+
     .checkbox-section {
       display: flex;
       flex-wrap: wrap;
@@ -178,9 +193,12 @@
 
   <div class="container">
     <div class="search-container">
-      <label for="query">Suchbegriff:</label>
       <input type="text" id="query" name="query" placeholder="Suchbegriff eingeben..." />
-      <button id="searchButton" onclick="performSearch()">Suchen</button>
+      <div class="button-group">
+        <button id="searchButton" onclick="performSearch()">Suchen</button>
+        <button id="resetButton" onclick="resetForm()">Löschen</button>
+    </div>
+
     </div>
 
     <div class="checkbox-container">
@@ -443,11 +461,6 @@
         <input type="checkbox" id="thieme" value="thieme" class="sonstige-checkbox">
         <label for="thieme">Sport Thieme</label><br>
     </div>
-
-
-
-
-      <!-- Füge weitere Gruppen hier hinzu -->
     </div>
   </div>
 
@@ -492,6 +505,16 @@
         subCheckboxes.forEach(checkbox => {
         checkbox.checked = masterCheckbox.checked;
         });
+    }
+
+        function resetForm() {
+        document.getElementById('query').value = ''; // Textfeld zurücksetzen
+
+        // Alle Checkboxen zurücksetzen
+        const checkboxes = document.querySelectorAll('.checkbox-container input[type="checkbox"]');
+        checkboxes.forEach((checkbox) => {
+            checkbox.checked = false; // Alle Checkboxen auf unchecked setzen
+        });
     }
   </script>