<div class="container">
     <input type="search" id="searchBar">
     <p id="para">API called 0 times</p>
     <button id="btn">reset</button>
</div>

let output = document.getElementById("para");
let input = document.getElementById("searchBar");

let count = 0;

function debounce(fn, delay) {
  let timer;

  return function () {
    clearTimeout(timer);
    timer = setTimeout(() => fn(), delay);
  };
}

const handleChange = debounce(() => {
  output.textContent = `API called ${++count} times`;
}, 1000);

input.addEventListener("input", handleChange);

// reset
let btn = document.getElementById("btn")
btn.addEventListener("click", () => {
  count = 0
  input.value = ""
  output.textContent = `API called ${count} times`;
})