_includes/section/home.html in word-games-theme-0.4.0 vs _includes/section/home.html in word-games-theme-0.4.1
- old
+ new
@@ -67,13 +67,15 @@
</div>
<div class="wordLength">
<label for="wordLength">Word Length </label>
<br>
<input type="text" id="wordLength" placeholder="Length" name="length">
- <div style="margin-top: 1.2rem;">
- <input type="submit" value="Apply" class="btn-info w-100 text-white"
+ <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: {{CustomColor.inputButtonBg}};">
+ <input type="submit" value="Apply" class="btn-info text-white"
+ style="background-color: {{CustomColor.inputButtonBg}};">
</div>
</div>
</div>
@@ -82,9 +84,24 @@
</div>
</div>
</div>
<script>
+
+ const clearFilter = document.querySelector('.clearFilter')
+ let startsWith = document.getElementById('startsWith')
+ let mustInclude = document.getElementById('mustInclude')
+ let endsWith = document.getElementById('endsWith')
+ let wordLength = document.getElementById('wordLength')
+
+
+ clearFilter.addEventListener("click", (() => {
+ startsWith.value = ""
+ mustInclude.value = ""
+ endsWith.value = ""
+ wordLength.value = ""
+ }))
+
const advancedFilter = document.querySelector('.advancedFilter')
const fillterWrapper = document.querySelector('.fillterWrapper')
advancedFilter.addEventListener('click', () => {
fillterWrapper.classList.toggle('active')
fillterWrapper.classList.remove('hide')
\ No newline at end of file