added a search system on heropeadia web application

Scripts/Search.js

@@ -0,0 +1,92 @@
+
+let searchContainer =  document.getElementById("search-container");
+let searchBox =  document.getElementById("search-div");
+let searchImg = document.getElementById("search-img1");
+let searchText = document.getElementById("search-text");
+let noSubmit = document.querySelector("form.nosubmit").clientWidth;
+let search = document.querySelector("input.nosubmit");
+let title = document.querySelectorAll(".card-title");
+let image = document.querySelectorAll(".card img");
+let len = image.length
+
+
+let dataArr = [];
+
+for(let i=0;i<len;i++){
+    dataArr.push({
+        name:title[i].innerHTML,
+        img:image[i].src
+    })
+}
+
+let variableSrc =""
+
+function searching(){
+   let inputs = search.value.toLowerCase();
+
+
+   for (const obj of dataArr) {
+    if (obj.name.toLowerCase().includes(inputs)) {
+        searchImg.src = obj.img;
+
+        searchText.innerHTML = obj.name;
+        visible();
+        variableSrc = obj.img;
+
+
+
+    }
+}
+
+
+}
+
+ var h2Elements = document.querySelectorAll('h2.card-title');
+
+
+searchContainer.addEventListener("click",()=>{
+
+for (var i = 0; i < h2Elements.length; i++) {
+    var h2 = h2Elements[i];
+    if (h2.textContent == searchText.innerHTML) {
+
+      var section = h2.parentElement;
+      section.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      break; 
+    }
+  }
+
+
+     notVisible()
+})
+
+
+visible();
+
+
+
+
+searchContainer.style.width= noSubmit +'px'
+searchContainer.style.display = "none"
+
+
+
+
+
+function visible(){
+    searchContainer.style.display = "block"
+}
+
+function delayedTrigger(callback, delay) {
+    setTimeout(callback, delay);
+  }
+function notVisible(){
+    delayedTrigger(()=>{searchContainer.style.display = "none"
+},1000);
+
+}
+
+
+
+
+searchImg.src = image[0].src

index.html

@@ -54,8 +54,17 @@
                         </div>
                     </div>
                 </div>
-                <form class="nosubmit">
-                    <input class="nosubmit" type="search" placeholder="Search for Character">
+                <form id="search" name="search" class="nosubmit">
+                    <input onblur="notVisible()" onfocus="searching()" oninput="searching()" class="nosubmit" type="search" placeholder="Search for Character">
+                    <div id="search-container">
+                    <div id="search-div" >
+
+                    <img id="search-img1" height="48px" width="48px" >
+
+                     <p id="search-text">Hero name</p>
+                    </div>
+
+                </div>
                 </form>
     </div>
 
@@ -479,4 +488,5 @@ <h6>Technology, Information and Internet Kanpur</h6>
             }
         });
     </script>
+    <script src="./Scripts/Search.js"></script>
 </body>

styles.css

@@ -1081,6 +1081,45 @@ section,
   }
 }
 
+
+/*search bar style start*/
+#search-container{
+  position: absolute;
+  z-index: 1000;
+  display: none;
+  cursor: pointer;
+
+}
+
+
+#search-div{
+  width: 100%; 
+  height: 40px;
+  background-color: rgb(235, 235, 235);
+  margin-top: 1px; 
+  display: flex;
+  border: 1px solid black;
+  border-radius: 10px;
+}
+#search-div:hover{
+  background-color: rgb(235, 235, 235);
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+
+}
+
+#search-img1{
+  width: 11%;
+  height: 38px;
+  border: 0;
+  border-radius: 10px;
+
+}
+#search-text{
+  margin-top: 8px;
+  margin-left: 4px;
+}
+/*search bar style end*/
+
 /* Adjusted the font size of All Anime Characters for small screen size */
 @media (max-width: 400px) {
   .text_heading {
@@ -1220,3 +1259,4 @@ input.nosubmit {
   padding: 9px 4px 9px 40px;
   background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 13px center;
 }
+