not working

Parv-gugnani · Parv-gugnani · commit b23c93228b9c · 2023-12-30T17:43:41.000+05:30
diff --git a/Search bar/index.html b/Search bar/index.html
@@ -3,23 +3,21 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Search Bar</title>
-    <link rel="stylesheet" href="style.css" />
+    <title>Search Bar Example</title>
+    <link rel="stylesheet" type="text/css" href="style.css" />
   </head>
+
   <body>
     <div class="container">
       <input
-        class="searchbar"
+        id="searchbar"
         onkeyup="search_animal()"
         type="text"
         name="search"
-        placeholder="search..."
-      >
-    <ul id="list">
-        <li class="option">Girl</li>
-        <li class="option">cat</li>
-        <li class="option">Dog</li>
-        <li class="option">Mouse</li>
+        placeholder="Search animals.."
+      />
+
+      <ul id="list">
         <li class="option">Apple</li>
         <li class="option">Banana</li>
         <li class="option">Elephant</li>
@@ -119,9 +117,9 @@
         <li class="option">Infusion</li>
         <li class="option">Cascade</li>
         <li class="option">Symphony</li>
-    </ul>
-</input>
+      </ul>
     </div>
+
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/Search bar/script.js b/Search bar/script.js
@@ -0,0 +1,13 @@
+function search_animal() {
+  let input = document.getElementById("searchbar").value.toLowerCase();
+  let x = document.getElementsByClassName("animals");
+  let animalsArray = Array.from(x);
+
+  animalsArray.forEach((animal) => {
+    if (!animal.textContent.toLowerCase().includes(input)) {
+      animal.style.display = "none";
+    } else {
+      animal.style.display = "list-item";
+    }
+  });
+}
