Debounce Project

74af31a7 · Muhammad Ameen · 74af31a7 · 74af31a7 · 74af31a7
Commit 74af31a7 authored May 31, 2022 by Muhammad Ameen 💻
Hide whitespace changes
Inline Side-by-side

Showing with 56 additions and 0 deletions

app.js app.js +12 -0

inex.html inex.html +23 -0

style.css style.css +21 -0

No files found.
--- a/app.js
+++ b/app.js
+function debounce() {
+  let x = setTimeout(() => {
+    console.log("Muhammad Amenn");
+    searching.style.display = "block"
+  }, 1000);
+
+  clearTimeout(x - 1);
+}
+
+let searching = document.getElementById("searching")
+
+searching.style.display = "none"
--- a/inex.html
+++ b/inex.html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./style.css" />
+    <title>Debounce</title>
+  </head>
+  <body>
+    <div class="mainContiner">
+      <input
+        type="text"
+        oninput="debounce()"
+        class="input"
+        placeholder="Search Here"
+      />
+      <p id="searching">Searching........</p>
+    </div>
+
+    <script src="./app.js"></script>
+  </body>
+</html>
--- a/style.css
+++ b/style.css
+body {
+  padding: 0;
+  margin: 0;
+}
+.mainContiner {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  height: 100vh;
+  background-color: rgb(38, 99, 144);
+}
+
+.input {
+  width: 50%;
+  padding: 20px;
+}
+
+p {
+    color: white;
+}