<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;

const handleChange = function () {
  // Suppose API call is made here
  count += 1
  output.textContent = `API called ${count} times`;
};

input.addEventListener("input", handleChange);

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.