commonPage.html in word-games-theme-0.4.1

- old
+ new

@@ -72,13 +72,14 @@
                             <label for="wordLength">Word Length </label>
                             <input type="text" class="filter_val" id="wordLength" placeholder="Length" name="length"
                                 value="">
                         </div>
 
-                        <div style="margin-top: 1.2rem;">
-                            <input type="submit" value="Apply" class="btn-info w-100 text-white"
-                                style="background: #808080">
+                        <div style="margin-top: 1.2rem; gap:5px" class="d-flex w-100">
+                            <input type="button" value="Clear" class="clearFilter btn-info  text-white"
+                                style="background-color:#808080;">
+                            <input type="submit" value="Apply" class="btn-info  text-white" style="background: #808080">
                         </div>
                     </div>
 
                 </form>
             </div>
@@ -89,9 +90,17 @@
 </div>
 
 <!-- close commonPage as LandingPage -->
 <link rel="stylesheet" href="{{ '/assets/css/advancedFilter.css' | relative_url }}">
 <script>
+    const clearFilter = document.querySelector('.clearFilter')
+
+    clearFilter.addEventListener('click', () => {
+        startsWith.value = ''
+        mustInclude.value = ''
+        endsWith.value = ''
+        wordLength.value = ''
+    })
     const fillterWrapper = document.querySelector('.fillterWrapper')
     function myFunction() {
         fillterWrapper.classList.toggle('hide')
     }
     const close = document.querySelector('.times')
\ No newline at end of file