minimal search on skills

index.html

@@ -8,6 +8,22 @@ <h2>Code Fellows</h2>
 
     <p>Kijk op <a href="https://github.com/codefornl/code-fellows">Github</a> om jezelf als Code Fellow toe te laten voegen. We gebruiken hiervoor de <a href="https://jsonresume.org/schema/">JSON Resume</a> standaard.</a></p>
 
+    <input style="padding: 1em; font-size: 1em; width: 20em" type="search" id="search" placeholder="Filter op kennis en expertise">
+    <script>
+        document.getElementById('search').addEventListener('keyup', function (event) {
+            var search = event.target.value.toLowerCase();
+            var persons = document.querySelectorAll('.person');
+            persons.forEach(function (person) {
+                var skills = person.querySelector('.skills').textContent.toLowerCase();
+                if (skills.includes(search)) {
+                    person.style.display = 'block';
+                } else {
+                    person.style.display = 'none';
+                }
+            });
+        });
+    </script>
+
     <div class="person-list" id="code-fellow-list">
         <script src="micro-templating.js"></script>
         <script type="text/html" id="code-fellow">
@@ -17,7 +33,8 @@ <h2>Code Fellows</h2>
                     <%=name%><br>
                     <a href="mailto:<%=email%>"><%=email%></a>
                 </p>
-                <p><%=summary%></p>
+                <p class="summary"><%=summary%></p>
+                <p class="skills"><%=skills.replace(/,/g, ', ')%></p>
                 <p class="social">
                     <a class="websiteBtn smGlobalBtn" href="<%=url%>"></a>
                 </p>
@@ -36,7 +53,8 @@ <h2>Code Fellows</h2>
                             "email": resume.basics.email || "[email protected]",
                             "summary": resume.basics.summary || "Nog geen omschrijving beschikbaar.",
                             "image": resume.basics.image || "https://upload.wikimedia.org/wikipedia/commons/thumb/6/65/No-Image-Placeholder.svg/832px-No-Image-Placeholder.svg.png",
-                            "url": resume.basics.url || "https://codefor.nl/"
+                            "url": resume.basics.url || "https://codefor.nl/",
+                            "skills": resume.skills && resume.skills.map(skill => skill.keywords.join(',')).join(', ') || ""
                         };
                         var template = document.getElementById('code-fellow').innerHTML;
                         var html = tmpl(template, values);
@@ -51,7 +69,8 @@ <h2>Code Fellows</h2>
                 {{ code-fellow.basics.name }}<br>
                 <a href="mailto:{{ code-fellow.basics.email }}">{{ code-fellow.basics.email }}</a>
             </p>
-            <p>{{ code-fellow.basics.summary }}</p>
+            <p class="summary">{{ code-fellow.basics.summary }}</p>
+            <p class="skills"></p>
             <p class="social">
                 <a class="websiteBtn smGlobalBtn" href="{{ code-fellow.basics.url }}"></a>
             </p>