quick search through recipes

content/_index.md

@@ -2,9 +2,39 @@
 title: "🍲 Based Cooking 🍳"
 ---
 
-## Categories
+## What do you want to cook?
 
-{{< tagcloud >}}
+<div class="search">
+  <input type="text" id="search" placeholder="Search...">
+  <button class="clear-search">
+    <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Backspace</title><path d="M135.19 390.14a28.79 28.79 0 0021.68 9.86h246.26A29 29 0 00432 371.13V140.87A29 29 0 00403.13 112H156.87a28.84 28.84 0 00-21.67 9.84v0L46.33 256l88.86 134.11z" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"></path><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M336.67 192.33L206.66 322.34M336.67 322.34L206.66 192.33M336.67 192.33L206.66 322.34M336.67 322.34L206.66 192.33"></path></svg>
+  </button>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+  const rec = document.querySelectorAll('#artlist li')
+  const search = document.querySelector('#search')
+  const clearSearch = document.querySelector('.clear-search')
+
+  search.addEventListener('change', e => {
+    // grab search input value
+    const searchText = e.target.value.toLowerCase()
+    // for each receipe hide all but matched
+    rec.forEach(el => {
+      const recipeName = el.innerText.toLowerCase()
+      const isMatch = recipeName.includes(searchText)
+
+      el.hidden = !isMatch
+    })
+  })
+
+  clearSearch.addEventListener('click', e => {
+    search.value = ''
+    rec.forEach(el => el.hidden = false)
+  })
+})
+</script>
 
 ## All Recipes