Merge pull request #26 from DSACMS/search-box

Add search box to projects page.

site/projects.liquid

@@ -1,11 +1,26 @@
 ---
 layout: base
 ---
+<script type="module" src="/assets/js/projects.js"></script>
 <div class="grid-container">
-  The Centers for Medicare and Medicaid Services develops or funds many open-source projects. Here are some of them:
+  <p>
+    The Centers for Medicare and Medicaid Services develops or supports many open-source projects. Here are some of
+    them:
+  </p>
+  <div class="margin-bottom-2">
+    <label class="usa-label" for="filter-input">Filter</label>
+    <div class="usa-input-group width-full maxw-none">
+      <div class="usa-input-prefix" aria-hidden="true">
+        <svg aria-hidden="true" role="img" focusable="false" class="usa-icon">
+          <use xlink:href="/assets/img/sprite.svg#search"></use>
+        </svg>
+      </div>
+      <input class="usa-input" id="filter-input" name="filter-input">
+    </div>
+  </div>
   <ul class="usa-card-group">
     {% for repo in repos.repos %}
-      <li class="usa-card tablet:grid-col-6">
+      <li class="usa-card project-card tablet:grid-col-6">
         <div class="usa-card__container">
           <div class="usa-card__header">
             <h2 class="usa-card__heading">

src/js/projects.js

@@ -0,0 +1,9 @@
+const filterBox = document.getElementById("filter-input")
+filterBox.addEventListener("input", () => {
+  const query = filterBox.value.toLowerCase()
+  document.querySelectorAll(".project-card").forEach((card) => {
+    card.hidden = !(
+      query == "" || card.textContent.toLowerCase().includes(query)
+    )
+  })
+})