Added Search Function for each Components (#519)

Rakesh9100 · Feb 6, 2024 · 1384770 · 1384770
1 parent 8408385
commit 1384770
Show file tree

Hide file tree

Showing 15 changed files with 129 additions and 6 deletions.
diff --git a/assets/css_files/search.css b/assets/css_files/search.css
@@ -0,0 +1,11 @@
+#searchBar{
+    margin-top: -60px;
+}
+
+#searchBar h1{
+    font-size: 3rem;
+}
+
+#searchBar input{
+    margin-top: -10px;
+}
diff --git a/assets/html_files/accordions.html b/assets/html_files/accordions.html
@@ -9,6 +9,7 @@
     <link rel="stylesheet" type="text/css" href="../../style.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
     <link rel="stylesheet" type="text/css" href="../css_files/accordions.css" />
+    <link rel="stylesheet" href="../css_files/search.css">
     <script src="../js_files/commonnav.js"></script>
     <script src="https://kit.fontawesome.com/b08b6de27e.js" crossorigin="anonymous"></script>
     <title>Beautiify | Accordions</title>
@@ -59,12 +60,17 @@
             </div>
         </nav>
     </header>
-    
+
     <section>
 
         <button id="dark-mode-toggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
 
         <div class="heading">Accordions</div>
+        <!-- Search Bar -->
+        <div id="searchBar">
+            <h1>Search Accordion</h1><br>
+            <input type="text" id="componentSearch" placeholder="Enter Accordion Name" oninput="filtereachComponents()">
+        </div>
         <div class="contain">
             <div class="box">
                 <h1>Modern Accordion</h1>
@@ -173,21 +179,22 @@ <h1>Simple Accordion</h1>
             </div>
         </div>
     </section>
-  
+
     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
         integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg=="
         crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script src="../js_files/commonanimation.js"></script>
-  
+
     <script src="../js_files/dark-mode.js"></script>
 
     <!-- SCROLL TO TOP BUTTON -->
     <div id="progress">
         <span id="progress-value">&#x1F815;</span>
     </div>
+    <script src="../js_files/search.js"></script>
     <script src="../../script.js"></script>
 
 
 </body>
 
-</html>
+</html>
diff --git a/assets/html_files/backgrounds.html b/assets/html_files/backgrounds.html
@@ -9,6 +9,7 @@
     <link rel="stylesheet" type="text/css" href="../../style.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
     <link rel="stylesheet" type="text/css" href="../css_files/backgrounds.css" />
+    <link rel="stylesheet" href="../css_files/search.css">
     <script src="../js_files/commonnav.js"></script>
     <script src="https://kit.fontawesome.com/b08b6de27e.js" crossorigin="anonymous"></script>
     <title>Beautiify | Backgrounds</title>
@@ -65,6 +66,11 @@
         <button id="dark-mode-toggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
 
         <div class="heading">Backgrounds</div>
+          <!-- Search Bar -->
+          <div id="searchBar">
+            <h1>Search Background</h1><br>
+            <input type="text" id="componentSearch" placeholder="Enter Background Name" oninput="filtereachComponents()">
+        </div>
         <div class="contain">
             <div class="box">
                 <h1>Animated Colorful Background</h1>
@@ -424,6 +430,7 @@ <h1>Mouse Responsive Web Background</h1>
     <div id="progress">
         <span id="progress-value">&#x1F815;</span>
     </div>
+    <script src="../js_files/search.js"></script>
     <script src="../../script.js"></script>
 
 </body>

diff --git a/assets/html_files/breadcrumbs.html b/assets/html_files/breadcrumbs.html
@@ -9,6 +9,7 @@
     <link rel="stylesheet" type="text/css" href="../../style.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
     <link rel="stylesheet" type="text/css" href="../css_files/breadcrumbs.css" />
+    <link rel="stylesheet" href="../css_files/search.css">
     <script src="../js_files/commonnav.js"></script>
     <script src="https://kit.fontawesome.com/b08b6de27e.js" crossorigin="anonymous"></script>
     <title>Beautiify | Breadcrumbs</title>
@@ -65,6 +66,11 @@
         <button id="dark-mode-toggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
 
         <div class="heading">Breadcrumbs</div>
+          <!-- Search Bar -->
+          <div id="searchBar">
+            <h1>Search Breadcrumbs</h1><br>
+            <input type="text" id="componentSearch" placeholder="Enter breadcrumbs Name" oninput="filtereachComponents()">
+        </div>
         <div class="contain">
             <div class="box">
                 <h1>Colored Breadcrumb</h1>
@@ -184,6 +190,7 @@ <h1>Parallel Park Breadcrumb</h1>
     <div id="progress">
         <span id="progress-value">&#x1F815;</span>
     </div>
+    <script src="../js_files/search.js"></script>
     <script src="../../script.js"></script>
 
 </body>

diff --git a/assets/html_files/buttons.html b/assets/html_files/buttons.html
@@ -9,6 +9,7 @@
     <link rel="stylesheet" type="text/css" href="../../style.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
     <link rel="stylesheet" type="text/css" href="../css_files/buttons.css" />
+    <link rel="stylesheet" href="../css_files/search.css">
     <script src="../js_files/commonnav.js"></script>
     <script src="https://kit.fontawesome.com/b08b6de27e.js" crossorigin="anonymous"></script>
     <title>Beautiify | Buttons</title>
@@ -65,6 +66,11 @@
         <button id="dark-mode-toggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
 
         <div class="heading">Buttons</div>
+        <!-- Search Bar -->
+        <div id="searchBar">
+            <h1>Search Button</h1><br>
+            <input type="text" id="componentSearch" placeholder="Enter Button Name" oninput="filtereachComponents()">
+        </div>
         <div class="contain">
             <div class="box">
                 <h1>Glassmorphism Button</h1>
@@ -372,17 +378,18 @@ <h1>Swipe Right Button</h1>
             </div>
         </div>
     </section>
-  
+
     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
         integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg=="
         crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script src="../js_files/commonanimation.js"></script>
-     
+
     <script src="../js_files/dark-mode.js"></script>
     <!-- SCROLL TO TOP BUTTON -->
     <div id="progress">
         <span id="progress-value">&#x1F815;</span>
     </div>
+    <script src="../js_files/search.js"></script>
     <script src="../../script.js"></script>
 
 </body>

diff --git a/assets/html_files/cards.html b/assets/html_files/cards.html
@@ -9,6 +9,7 @@
     <link rel="stylesheet" type="text/css" href="../../style.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
     <link rel="stylesheet" type="text/css" href="../css_files/cards.css"/>
+    <link rel="stylesheet" href="../css_files/search.css">
     <script src="../js_files/commonnav.js"></script>
     <script src="https://kit.fontawesome.com/b08b6de27e.js" crossorigin="anonymous"></script>
     <title>Beautiify | Cards</title>
@@ -65,6 +66,11 @@
         <button id="dark-mode-toggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
 
         <div class="heading">Cards</div>
+          <!-- Search Bar -->
+          <div id="searchBar">
+            <h1>Search Cards</h1><br>
+            <input type="text" id="componentSearch" placeholder="Enter Card Name" oninput="filtereachComponents()">
+        </div>
         <div class="contain">
             <div class="box">
                 <h1>Drag & Drop Card</h1>
@@ -285,6 +291,7 @@ <h1>User Attention Card</h1>
     <div id="progress">
         <span id="progress-value">&#x1F815;</span>
     </div>
+    <script src="../js_files/search.js"></script>
     <script src="../../script.js"></script>
 
     <script src="../js_files/dark-mode.js"></script>

diff --git a/assets/html_files/carousels.html b/assets/html_files/carousels.html
@@ -9,6 +9,7 @@
     <link rel="stylesheet" type="text/css" href="../../style.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
     <link rel="stylesheet" type="text/css" href="../css_files/carousels.css"/>
+    <link rel="stylesheet" href="../css_files/search.css">
     <script src="../js_files/commonnav.js"></script>
     <script src="https://kit.fontawesome.com/b08b6de27e.js" crossorigin="anonymous"></script>
     <title>Beautiify | Carousels</title>
@@ -64,6 +65,11 @@
         <button id="dark-mode-toggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
 
         <div class="heading">Carousels</div>
+          <!-- Search Bar -->
+          <div id="searchBar">
+            <h1>Search Carousels</h1><br>
+            <input type="text" id="componentSearch" placeholder="Enter Carousel Name" oninput="filtereachComponents()">
+        </div>
         <div class="contain">
             <div class="box">
                 <h1>3D Image Carousel</h1>
@@ -221,6 +227,7 @@ <h1>Neumorphic Carousel</h1>
     <div id="progress">
         <span id="progress-value">&#x1F815;</span>
     </div>
+    <script src="../js_files/search.js"></script>
     <script src="../../script.js"></script>
 
 </body>

diff --git a/assets/html_files/footers.html b/assets/html_files/footers.html
@@ -9,6 +9,7 @@
     <link rel="stylesheet" type="text/css" href="../../style.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
     <link rel="stylesheet" type="text/css" href="../css_files/footers.css" />
+    <link rel="stylesheet" href="../css_files/search.css">
     <script src="../js_files/commonnav.js"></script>
     <script src="https://kit.fontawesome.com/b08b6de27e.js" crossorigin="anonymous"></script>
     <title>Beautiify | Footers</title>
@@ -65,6 +66,11 @@
         <button id="dark-mode-toggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
 
         <div class="heading">Footers</div>
+          <!-- Search Bar -->
+          <div id="searchBar">
+            <h1>Search Footer</h1><br>
+            <input type="text" id="componentSearch" placeholder="Enter Footer Name" oninput="filtereachComponents()">
+        </div>
         <div class="contain">
             <div class="box">
                 <h1>Glassmorphism Footer</h1>
@@ -157,6 +163,7 @@ <h1>Animated Stylish Footer</h1>
     <div id="progress">
         <span id="progress-value">&#x1F815;</span>
     </div>
+    <script src="../js_files/search.js"></script>
     <script src="../../script.js"></script>
 
 </body>

diff --git a/assets/html_files/forms.html b/assets/html_files/forms.html
@@ -9,6 +9,7 @@
     <link rel="stylesheet" type="text/css" href="../../style.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
     <link rel="stylesheet" type="text/css" href="../css_files/forms.css"/>
+    <link rel="stylesheet" href="../css_files/search.css">
     <script src="../js_files/commonnav.js"></script>
     <script src="https://kit.fontawesome.com/b08b6de27e.js" crossorigin="anonymous"></script>
     <title>Beautiify | Forms</title>
@@ -64,6 +65,11 @@
         <button id="dark-mode-toggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
 
         <div class="heading">Forms</div>
+          <!-- Search Bar -->
+          <div id="searchBar">
+            <h1>Search Forms</h1><br>
+            <input type="text" id="componentSearch" placeholder="Enter Forms Name" oninput="filtereachComponents()">
+        </div>
         <div class="contain">
             <div class="box">
                 <h1>Contact Form</h1>
@@ -273,6 +279,7 @@ <h1>Event Form</h1>
     <div id="progress">
         <span id="progress-value">&#x1F815;</span>
     </div>
+    <script src="../js_files/search.js"></script>
     <script src="../../script.js"></script>
 
 </body>

diff --git a/assets/html_files/loaders.html b/assets/html_files/loaders.html
@@ -9,6 +9,7 @@
     <link rel="stylesheet" type="text/css" href="../../style.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
     <link rel="stylesheet" type="text/css" href="../css_files/loaders.css"/>
+    <link rel="stylesheet" href="../css_files/search.css">
     <script src="../js_files/commonnav.js"></script>
     <script src="https://kit.fontawesome.com/b08b6de27e.js" crossorigin="anonymous"></script>
     <title>Beautiify | Loaders</title>
@@ -65,6 +66,11 @@
         <button id="dark-mode-toggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
 
         <div class="heading">Loaders</div>
+          <!-- Search Bar -->
+          <div id="searchBar">
+            <h1>Search Loader</h1><br>
+            <input type="text" id="componentSearch" placeholder="Enter Loader Name" oninput="filtereachComponents()">
+        </div>
         <div class="contain">
             <div class="box">
                 <h1>Glassmorphism Loader</h1>
@@ -463,6 +469,7 @@ <h1>Polygon Loader</h1>
     <div id="progress">
         <span id="progress-value">&#x1F815;</span>
     </div>
+    <script src="../js_files/search.js"></script>
     <script src="../../script.js"></script>
 
 </body>

diff --git a/assets/html_files/navigation-bars.html b/assets/html_files/navigation-bars.html
@@ -9,6 +9,7 @@
     <link rel="stylesheet" type="text/css" href="../../style.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
     <link rel="stylesheet" type="text/css" href="../css_files/navigation-bars.css"/>
+    <link rel="stylesheet" href="../css_files/search.css">
     <script src="../js_files/commonnav.js"></script>
     <script src="https://kit.fontawesome.com/b08b6de27e.js" crossorigin="anonymous"></script>
     <title>Beautiify | Navigation Bars</title>
@@ -65,6 +66,11 @@
         <button id="dark-mode-toggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
 
         <div class="heading">Navigation Bars</div>
+          <!-- Search Bar -->
+          <div id="searchBar">
+            <h1>Search NavBar</h1><br>
+            <input type="text" id="componentSearch" placeholder="Enter NavBar Name" oninput="filtereachComponents()">
+        </div>
         <div class="contain">
             <div class="box">
                 <h1>Hamburger Navigation Bar</h1>
@@ -235,6 +241,7 @@ <h1>Pulse Animated Navigation Bar</h1>
     <div id="progress">
         <span id="progress-value">&#x1F815;</span>
     </div>
+    <script src="../js_files/search.js"></script>
     <script src="../../script.js"></script>
 
 </body>

diff --git a/assets/html_files/search-bars.html b/assets/html_files/search-bars.html
@@ -9,6 +9,7 @@
     <link rel="stylesheet" type="text/css" href="../../style.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
     <link rel="stylesheet" type="text/css" href="../css_files/search-bars.css" />
+    <link rel="stylesheet" href="../css_files/search.css">
     <script src="../js_files/commonnav.js"></script>
     <script src="https://kit.fontawesome.com/b08b6de27e.js" crossorigin="anonymous"></script>
     <title>Beautiify | Search Bars</title>
@@ -65,6 +66,11 @@
         <button id="dark-mode-toggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
 
         <div class="heading">Search Bars</div>
+          <!-- Search Bar -->
+          <div id="searchBar">
+            <h1>Search SearchBar</h1><br>
+            <input type="text" id="componentSearch" placeholder="Enter SearchBar Name" oninput="filtereachComponents()">
+        </div>
         <div class="contain">
             <div class="box">
                 <h1>Expandable Search Bar</h1>
@@ -205,6 +211,7 @@ <h1>Operating Search Bar</h1>
     <div id="progress">
         <span id="progress-value">&#x1F815;</span>
     </div>
+    <script src="../js_files/search.js"></script>
     <script src="../../script.js"></script>
 
 </body>

diff --git a/assets/html_files/text-animations.html b/assets/html_files/text-animations.html
@@ -9,6 +9,7 @@
     <link rel="stylesheet" type="text/css" href="../../style.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
     <link rel="stylesheet" type="text/css" href="../css_files/text-animations.css" />
+    <link rel="stylesheet" href="../css_files/search.css">
     <script src="../js_files/commonnav.js"></script>
     <script src="https://kit.fontawesome.com/b08b6de27e.js" crossorigin="anonymous"></script>
     <title>Beautiify | Text Animations</title>
@@ -65,6 +66,11 @@
         <button id="dark-mode-toggle"><i class="fa-solid fa-circle-half-stroke"></i></button>
 
         <div class="heading">Text Animations</div>
+          <!-- Search Bar -->
+          <div id="searchBar">
+            <h1>Search Text Animation</h1><br>
+            <input type="text" id="componentSearch" placeholder="Enter Text Animation Name" oninput="filtereachComponents()">
+        </div>
         <div class="contain">
             <div class="box">
                 <h1>Shuffle Text Animation</h1>
@@ -283,6 +289,7 @@ <h1>Shaking Text Animation</h1>
     <div id="progress">
         <span id="progress-value">&#x1F815;</span>
     </div>
+    <script src="../js_files/search.js"></script>
     <script src="../../script.js"></script>
 
 </body>