Debounce complete

app.js

+let searching = document.getElementById("searching");
+let count = document.getElementById("count");
+let input = document.getElementById("input");
+var num = 0;
+
 function debounce() {
-  let x = setTimeout(() => {
-    console.log("Muhammad Amenn");
-    searching.style.display = "block"
-  }, 1000);
+  if (input.value?.length > 0) {
+    let x = setTimeout(() => {
+      console.log("Muhammad Amenn");
+      searching.style.display = "block";
+      num++;
+      count.innerHTML = num;
+    }, 1000);
 
-  clearTimeout(x - 1);
+    clearTimeout(x - 1);
+  }
 }
-
-let searching = document.getElementById("searching")
-
-searching.style.display = "none"

inex.html

@@ -14,8 +14,9 @@
         oninput="debounce()"
         class="input"
         placeholder="Search Here"
+        id="input"
       />
-      <p id="searching">Searching........</p>
+      <p class="count" id="searching">Api Hit <span style="color: red; font-size: 30px;" id="count">0</span></p>
     </div>
 
     <script src="./app.js"></script>

style.css

@@ -19,3 +19,9 @@ body {
 p {
     color: white;
 }
+
+.count{
+  font-size: 24px;
+  font-family: sans-serif;
+  letter-spacing: 2px;
+}