<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`;
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.