<div class="columns mx-1">
  <div class="column is-half is-offset-one-quarter">

      <section class="hero is-primary mb-4">
          <div class="hero-body">
              <p class="title">
                  Gallery of Cats
              </p>
              <p class="subtitle">Images from Unsplash.com</p>
          </div>
      </section>


      <section>
          <div>
              <label for="searchbox" class="is-size-5">Search</label>
              <input class='input mb-5' type="search" id="searchbox" placeholder="Live search keyword..">
          </div>

   <div>
          <img class='image' src="https://i.ibb.co/M8JZtzV/Screen-Shot-2021-10-15-at-5-48-47-AM.png" width="100%" height="150" 
                  alt="walking at harbour" />


          <img class='image' src="https://i.ibb.co/jV9m8Rd/Screen-Shot-2021-10-15-at-5-48-43-AM.png" width="100%" height="150"
                  alt="high five with human" />


          <img class='image' src="https://i.ibb.co/XFB0F9r/Screen-Shot-2021-10-15-at-5-47-55-AM.png" width="100%" height="150" 
                  alt="snow on the grass" />


          <img class='image' src="https://i.ibb.co/jk88PcP/Screen-Shot-2021-10-15-at-5-47-31-AM.png" width="100%" height="150"
                  alt="butterfly on my nouse" />


          <img class='image' src="https://i.ibb.co/QbsMywp/Screen-Shot-2021-10-15-at-5-47-52-AM.png" width="100%" height="150"
                  alt="chillin on the chair" />


          <img class='image' src="https://i.ibb.co/cTsY7Yk/Screen-Shot-2021-10-15-at-5-47-49-AM.png" width="100%" height="150"
                  alt="kitten is confused" />


          <img class='image' src="https://i.ibb.co/6wn8RkL/Screen-Shot-2021-10-15-at-5-47-45-AM.png" width="100%" height="150"
                  alt="staring at human, sitting on top of table" />


          <img class='image' src="https://i.ibb.co/pbqQMng/Screen-Shot-2021-10-15-at-5-47-41-AM.png" width="100%" height="150"
                  alt="cute kitten on bed" />


          <img class='image' src="https://i.ibb.co/ky2QtVs/Screen-Shot-2021-10-15-at-5-47-37-AM.png" width="100%" height="150"
                  alt="cute kitten under the blanker" />
      </div>
      </section>

  </div>
</div>

let boxes = document.querySelectorAll('.image')
    
function liveSearch() {
    let search_query = document.getElementById("searchbox").value;

    for (var i = 0; i < boxes.length; i++) {
        if (boxes[i].getAttribute('alt').toLowerCase()
            .includes(search_query.toLowerCase())) {
            boxes[i].classList.remove("is-hidden");
        } else {
            boxes[i].classList.add("is-hidden");
        }
    }
}

//A little delay
let typingTimer;
let typeInterval = 500;
let searchInput = document.getElementById('searchbox');

searchInput.addEventListener('keyup', () => {
    clearTimeout(typingTimer);
    typingTimer = setTimeout(liveSearch, typeInterval);
});