displayed a message when no resources are found matching the filters

docs/_assets/css/style.css

@@ -47,6 +47,10 @@ h1 {
   list-style: none;
 }
 
+#noThumbnailsMessage h1{
+  text-align: center;
+}
+
 .thumbnailbox {
   grid-column: span 3;
   height: fit-content;

docs/_assets/js/listing.js

@@ -117,3 +117,21 @@ if (language) {
   isFilterSelected += ", .resourcenavlanguageunknown";
 }
 dynamicStyle.innerHTML += `${isFilterSelected} { display: block; }`;
+
+
+document.addEventListener('DOMContentLoaded', function () {
+  // Check if all thumbnailbox elements are hidden
+  var thumbnailBoxes = document.querySelectorAll('.thumbnailbox');
+  var allHidden = true;
+
+  thumbnailBoxes.forEach(function (box) {
+      if (window.getComputedStyle(box).display !== 'none') {
+          allHidden = false;
+      }
+  });
+
+  // Show the message if all thumbnailbox elements are hidden
+  if (allHidden) {
+      document.getElementById('noThumbnailsMessage').style.display = 'block';
+  }
+});

docs/_layouts/listing.html

@@ -50,6 +50,9 @@ <h1>Resources</h1>
 
       <!-- This is the section that shows all the resource cards in the site.
        The homepage shows upto 16 'featured' items ordered (1) to (16 or lesser) -->
+       <div id="noThumbnailsMessage" style="display: none;">
+        <h1>No resources matched the selected filters.</h1>
+        </div> 
       <ul id="thumbnaillist">
         {% for i in (1..16) %} {% for page in site.pages %} {% if page.layout
         =='resource' %} {% if page.featured == i %}
@@ -91,7 +94,7 @@ <h3 class="thumbnailtitle">
         {% endif %} {% endunless %} {% endif %} {% endif %} {% endfor %} {%
         endfor %} {% endunless %}
       </ul>
-    </main>
+    </main>   
 
     <!-- The standard CC footer, located at docs/_includes/footer.html -->
     {% include footer.html %}