text: // First, we need to find/compile all the references from the DOM & assign, etc.
  var $tbody = document.querySelector("tbody");
  var $dateTimeInput = document.querySelector("#date_time");
  var $cityInput = document.querySelector("#city");
  var $stateInput = document.querySelector("#state");
  var $countryInput = document.querySelector("#country");
  var $shapeInput = document.querySelector("#shape");
  var $searchBtn = document.querySelector("#search");
  var $recordCounter = document.querySelector("#recordCounter");
  var $pages = document.querySelector("#pages");
  var $loadBtn = document.querySelector("#load");
  var $nextBtn = document.querySelector("#next");
  var $prevBtn = document.querySelector("#prev");
  
  // Now for the buttons we will need to add the event listeners (when the user will click)
  $searchBtn.addEventListener("click", handleSearchButtonClick);
  $loadBtn.addEventListener("click", handleReloadButtonClick);
  $nextBtn.addEventListener("click", handleNextButtonClick);
  $prevBtn.addEventListener("click", handlePrevButtonClick);
  $pages.addEventListener("change", handlePagesChange);
  
  
  var filteredData = dataSet;
  var count = 0;
  
  // Next we  have to define Event handler functions themselves,
  // also the handleNextButtonClick increments count and renders
  function handleNextButtonClick() {
      count++;
      renderTable();
  }
  // handlePrevButtonClick decrements count and renders
  function handlePrevButtonClick() {
      count--;
      renderTable();
  }
  
  // handlePagesChange renders for when the user wants a new record count selected
  function handlePagesChange() {
      renderTable();
  }
  
  // handleSearchButtonClick handles search button click for cleaning out the inputted data, and checks for the non-empty search fields. 
  // Next and last the table is rendered.  
  
  
  function handleSearchButtonClick() {
      var filterDate = $dateTimeInput.value.trim();
      var filterCity = $cityInput.value.trim().toLowerCase();
      var filterState = $stateInput.value.trim().toLowerCase();
      var filterCountry = $countryInput.value.trim().toLowerCase();
      var filterShape = $shapeInput.value.trim().toLowerCase();
  
      if (filterDate != "") {
          filteredData = filteredData.filter(function (date) {
          var dataDate = date.datetime;
          return dataDate === filterDate;
     });
  
      }
  
      if (filterCity != "") {
          filteredData = filteredData.filter(function (city) {
          var dataCity = city.city;
          return dataCity === filterCity;
      });
      }
  
      if (filterState != "") {
          filteredData = filteredData.filter(function (state) {
              var dataState = state.state;
              return dataState === filterState;
          });
      }
  
      if (filterCountry != "") {
          filteredData = filteredData.filter(function (country) {
              var dataCountry = country.country;
              return dataCountry === filterCountry;
          });
      }
  
      if (filterShape != "") {
          filteredData = filteredData.filter(function (shape) {
              var dataShape = shape.shape;
              return dataShape === filterShape;
          });
      }
  
      renderTable();
  }
  
  // Next out handleReloadButtonClick resets our count and search fields, and then RE- renders
  function handleReloadButtonClick() {
      count = 0;
      filteredData = dataSet;
      $dateTimeInput.value = '';
      $cityInput.value = '';
      $stateInput.value = '';
      $countryInput.value = '';
      $shapeInput.value = '';
  
      renderTable();
  }
  
  // Define renderTable function
  function renderTable() {
      // clear the previously rendered table that we populated.
      $tbody.innerHTML = "";
  
      // Get number of records to be rendered
      var pages = Number(document.getElementById("pages").value);
  
      // Now Set the variables.
      var start = count * pages + 1;
      var end = start + pages - 1;
      var btn;
  
      // Adjusts records displayed for end of data and state of Next button
      if (end > filteredData.length) {
        end = filteredData.length;
        btn = document.getElementById("next");
        btn.disabled = true;
      }
      else {
        btn = document.getElementById("next");
        btn.disabled = false;
      }
  
      // Adjusts the state of Previous button
      if (start == 1) {
        btn = document.getElementById("prev");
        btn.disabled = true;
      }
      else {
        btn = document.getElementById("prev");
        btn.disabled = false;
      }
  
      // Next, this then displays record counts and loads records into table
      $recordCounter.innerText = "From Record: " + start + " to: " + end + " of " + filteredData.length;
      // Outer loop loads specified number of records
      for (var i = 0; i < pages; i++) {
          var item = filteredData[i+(count * pages)];
          var fields = Object.keys(item);
          var $row = $tbody.insertRow(i);
          // Inner loop loads fields in record
          for (var j = 0; j < fields.length; j++) {
              var field = fields[j];
              var $cell = $row.insertCell(j);
              $cell.innerText = item[field];
          }
      }
  }
  
  // Provides initial render on open
  renderTable();
  
  