index.html

@@ -27,6 +27,14 @@
       <form id="search">
         <input name="query" type="text" placeholder="Query">
         <input type="submit" value="Search">
+        <input type="radio" id="search-category-all" name="category" value="all" checked>
+        <label for="search-category-all">All</label>
+        <input type="radio" id="search-category-images" name="category" value="images">
+        <label for="search-category-images">Images</label>
+        <input type="radio" id="search-category-news" name="category" value="news">
+        <label for="search-category-news">News</label>
+        <input type="radio" id="search-category-videos" name="category" value="videos">
+        <label for="search-category-videos">Videos</label>
       </form>
       <p id="info"></p>
     </div>

index.js

@@ -23,6 +23,9 @@ function buildSearchURL (opts = {}) {
   const params = new URLSearchParams({
     q: opts.query
   })
+  if (opts.category && opts.category !== 'all') {
+    params.append(`category_${opts.category}`, '')
+  }
   const url = `${instanceURL}?${params.toString()}`
   return url
 }
@@ -31,7 +34,8 @@ function buildSearchURL (opts = {}) {
 formEl.addEventListener('submit', (event) => {
   event.preventDefault()
   location.assign(buildSearchURL({
-    query: formEl.query.value
+    query: formEl.query.value,
+    category: formEl.category.value
   }))
 })
 
@@ -92,14 +96,13 @@ if (location.search.length > 0) {
   const searchParams = new URLSearchParams(location.search.slice(1))
   if (searchParams.has('q')) {
     location.assign(buildSearchURL({
-      query: searchParams.get('q')
+      query: searchParams.get('q'),
+      category: searchParams.get('in') ?? 'all'
     }))
   }
 }
 
+infoEl.textContent = `${data.instances.length} instances`
 if (data.instances.length > 0) {
-  infoEl.textContent = `${data.instances.length} instances`
-} else {
   infoEl.classList.add('error')
-  infoEl.textContent = '0 instances'
 }