Merge pull request 'Display item counter next to search form.' (#6) from item-counter into main

Reviewed-on: #6

static/c4.css

@@ -7,6 +7,16 @@ h1, h1 a  {
     color: #dfaa37; /* C4 Yellow */
 }
 
+#search.failed {
+    color: #200;
+    background-color: #ec6d5f;
+}
+
+#itemcount {
+    display: inline-block;
+    margin-right: 1ch;
+}
+
 #map {
   border: 1px solid #202020;
   background: #4d4d4d;

static/index.html

@@ -12,6 +12,7 @@
     <div id="grid">
       <div id="searchcontainer">
         <input type="text" id="search" value="" autocomplete="off" placeholder="RegEx search" tabindex="1" autofocus>
+        <p id="itemcount"></p>
         <label for="showhidden">Show hidden items</label>
         <input type="checkbox" id="showhidden">
       </div>

static/index.js

@@ -17,6 +17,7 @@ function renderItems() {
   const container = document.getElementById('results');
   const template = document.getElementById('item');
   const loading = document.getElementById('loading');
+  let count = 0;
 
   for (const [id, item] of Object.entries(items)) {
     const clone = template.content.cloneNode(true);
@@ -32,10 +33,13 @@ function renderItems() {
     clone.querySelector("a").href = `form.html?id=${encodeURIComponent(id)}`;
     if (item.hidden) {
       clone.querySelector(".result").classList.add('hidden')
-    };
+    } else {
+      count++;
+    }
     container.appendChild(clone);
   };
   loading.remove();
+  updateCounter(count);
 }
 
 function getLocString(items, item) {
@@ -67,6 +71,7 @@ function search(e) {
   const searchAttrs = ['id', 'name', 'type', 'note', 'content'];
   const query = e.target.value;
   const regex = new RegExp(query, 'i')
+  let count = 0;
 
   for (const elem of document.getElementsByClassName('result')) {
     const item = items[elem.id.slice(5)];
@@ -85,10 +90,36 @@ function search(e) {
 
     if (found) {
       elem.classList.remove('filtered');
+      count++;
     } else {
       elem.classList.add('filtered');
     }
   }
+
+  // Indicate failed search.
+  if (count) {
+    e.target.classList.remove('failed');
+  } else {
+    e.target.classList.add('failed');
+  }
+
+  updateCounter(count);
+}
+
+function updateCounter(count){
+  const itemcount = document.getElementById('itemcount');
+
+  switch(count) {
+    case 0:
+      itemcount.textContent = 'No items found.';
+      break;
+    case 1:
+      itemcount.textContent = '1 item found.';
+      break;
+    default:
+      itemcount.textContent = `${count} items found.`;
+      break;
+  }
 }
 
 function showhidden(e){