Show a message that says no results if the filters have no results

I have this working pretty well for the filtering, but there is quite a few options and there won't be that many articles to start with so I need it to call back no results found if nothing appears. Help would be greatly appreciated, I'm not really a coder just trying to hack something together here.

'''

    <div class="page-content-area-1200">          <h1>Education Hub</h1>      </div>        <div class="page-content-area-1200">          <div class="filter-contents">              <div class="row">                  <!-- Category -->                  <div class="col-sm">                      <div class="filterInputs">                          <p class="filter-header">Categories</p>                          <label><input type="radio" name="category" value="" checked><i></i>Show all</label>                          <label><input type="radio" name="category"                                  value="superannuation"><i></i>Superannuation</label>                          <label><input type="radio" name="category" value="insurance"><i></i>Insurance</label>                          <label><input type="radio" name="category" value="investments"><i></i>Investments</label>                          <label><input type="radio" name="category" value="advice"><i></i>Financial Advice</label>                      </div>                  </div>                  <!-- Life stage -->                  <div class="col-sm">                      <div class="filterInputs">                          <p class="filter-header">Life stage</p>                          <label><input type="radio" name="stage" value="" checked><i></i>Show all</label>                          <label><input type="radio" name="stage" value="accumulating"><i></i>Accumulating</label>                          <label><input type="radio" name="stage" value="approaching"><i></i>Approaching                              Retirement</label>                          <label><input type="radio" name="stage" value="retirement"><i></i>Retirement</label>                      </div>                  </div>                  <!-- Knowledge level -->                  <div class="col-sm">                      <div class="filterInputs">                          <p class="filter-header">Knowledge level</p>                          <label><input type="radio" name="knowledge" value="" checked><i></i>Show all</label>                          <label><input type="radio" name="knowledge" value="beginner"><i></i>Beginner</label>                          <label><input type="radio" name="knowledge" value="competent"><i></i>Competent</label>                          <label><input type="radio" name="knowledge" value="expert"><i></i>Expert</label>                      </div>                  </div>                  <!-- Media type -->                  <div class="col-sm">                      <div class="filterInputs">                          <p class="filter-header">Type</p>                          <label><input type="radio" name="type" value="" checked><i></i>Show all</label>                          <label><input type="radio" name="type" value="article"><i></i>Article</label>                          <label><input type="radio" name="type" value="video"><i></i>Video</label>                          <label><input type="radio" name="type" value="podcast"><i></i>Podcast</label>                      </div>                  </div>              </div>          </div>            <div data-filterable="insurance accumulating beginner article">insurance accumulating beginner article</div>          <div data-filterable="insurance investments accumulating beginner article">insurance investments              accumulating beginner article</div>          <div data-filterable="advice accumulating beginner podcast">advice accumulating beginner podcast</div>        </div>    </div>  <script>      const el_filters = document.querySelectorAll('[name="category"], [name="stage"], [name="knowledge"], [name="type"]'),          el_filterable = document.querySelectorAll('[data-filterable]');        const applyFilter = () => {            // Filter checked inputs          const el_checked = [...el_filters].filter(el => el.checked && el.value);            // Collect checked inputs values to array          const filters = [...el_checked].map(el => el.value);            // Get elements to filter          const el_filtered = [...el_filterable].filter(el => {              const props = el.getAttribute('data-filterable').trim().split(/\s+/);              return filters.every(fi => props.includes(fi))          });            // Hide all          el_filterable.forEach(el => el.classList.add('is-hidden'));            // Show filtered          el_filtered.forEach(el => el.classList.remove('is-hidden'));      }        // Assign event listener      el_filters.forEach(el => el.addEventListener('change', applyFilter));      // Init      applyFilter();  </script>  

https://stackoverflow.com/questions/66979418/show-a-message-that-says-no-results-if-the-filters-have-no-results April 07, 2021 at 12:06PM