Add feature to filter easy, medium, and hard activities and resources

Author: dangerworm

_includes/filter-difficulty.html

@@ -0,0 +1,9 @@
+<p>
+    You can filter the items on this page to show only
+    <a href="#" onclick="filterCards('Easy')">Easy</a>,
+    <a href="#" onclick="filterCards('Medium')">Medium</a>, or
+    <a href="#" onclick="filterCards('Hard')">Hard</a> cards.
+    If you want to, you can  
+    <a href="#" onclick="resetCards()">reset the cards</a> to
+    show them all again.
+</p>

_includes/scripts.html

@@ -38,6 +38,38 @@
     }
 </script>
 
+<script type="text/javascript">
+    if ("{{page.title}}" === "Activities" || "{{page.title}}" === "Resources") {
+        allCards = $('div.align-items-stretch:has(span.badge)');
+
+        function resetCards() {
+            $.each(allCards, function() {
+                var card = $(this);
+                if (!card.hasClass('d-flex')) {
+                    card.toggleClass('d-flex');
+                }
+                $(card).show();
+            });
+        }
+        
+        function filterCards(filterText) {
+            resetCards();
+            filteredCards = $('div.align-items-stretch');
+            
+            $.each(allCards, function() {
+                var card = $(this);
+                console.log(card);
+                console.log(card.not(':has(span.badge:contains("' + filterText + '"))'));
+                if (card.not(':has(span.badge:contains("' + filterText + '"))').length > 0) {
+                    card.toggleClass('d-flex');
+                    $(card).hide();
+                }
+            });
+        }
+    }
+</script>
+
+
 <!-- Placeholder for dynamic EventBrite integration script generation -->
 <script id="eventBriteWidgets" type="text/javascript">
 </script>

activities.html

@@ -29,6 +29,7 @@ <h1>{{page.title}}</h1>
     quite often we get people attending who are working their way through resources they've found elsewhere on
     the web. The following are just a few of the ones we see people on, along with some we recommend you try.
 </p>
+{% include filter-difficulty.html %}
 <p>
     Jump to: <a href="#activities-learning">Learning</a> | <a href="#activities-practice">Practice</a>
 </p>

resources.html

@@ -27,6 +27,7 @@ <h1>{{page.title}}</h1>
     On top of that, there are lots of places on the Internet which will do jobs that text editors just aren't built for.
     We've listed some of those too.
 </p>
+{% include filter-difficulty.html %}
 <p>
     Jump to:
     <a href="#resources-links">Useful Links</a> |