there is search button at top but no input field to take user input M…

…AVRICK-1#35
kapilG0 · Jun 2, 2024 · 67d6e04 · 67d6e04
1 parent cace646
commit 67d6e04
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 3 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -925,6 +925,9 @@ body {
 .blog-card .card-subtitle {
   text-transform: uppercase;
 }
+.me-2{
+  border:1px solid black;
+}
 
 .blog-card .card-title {
   margin-block: 10px 15px;
@@ -1717,4 +1720,19 @@ body {
   .content-banner {
     margin-inline: 0;
   }
-}
+}
+.x-input {
+  display: flex;
+  border: 1px solid #ccc;
+  cursor: pointer;
+}
+
+.x-input input.me-2 {
+  border: 0;
+  outline: 0;
+}
+.cross{
+  width: 10%;
+  margin-right: 2%;
+  cursor: pointer;
+}
diff --git a/assets/js/script.js b/assets/js/script.js
@@ -26,7 +26,24 @@ const navbar = document.querySelector("[data-navbar]");
 const navTogglers = document.querySelectorAll("[data-nav-toggler]");
 const navLinks = document.querySelectorAll("[data-nav-link]");
 const overlay = document.querySelector("[data-overlay]");
-
+let slideSearch = document.querySelector(".me-2");
+let slideCross= document.querySelector(".cross");
+let searchIcon= document.querySelector(".header-action-btn");
+
+slideSearch.style.display='none'
+slideCross.style.display='none'
+function showBar() {
+  slideSearch.style.display = "block";
+  slideCross.style.display='inline-block'
+  searchIcon.style.display='none'
+
+
+}
+function removeSearchBar() {
+  slideSearch.style.display = "none";
+  slideCross.style.display='none'
+  searchIcon.style.display='inline-block'
+}
 const toggleNavbar = function () {
   navbar.classList.toggle("active");
   overlay.classList.toggle("active");

diff --git a/index.html b/index.html
@@ -88,7 +88,13 @@
       </nav>
 
       <div class="header-actions">
-        <button class="header-action-btn" aria-label="toggle search" title="Search">
+        <form>
+        <span class="x-input">
+          <input type="text" class="me-2" />
+          <input type="reset" value=" X " class="cross" onclick="removeSearchBar()" />
+      </span>
+      </form>
+        <button class="header-action-btn" aria-label="toggle search" onclick="showBar()" title="Search">
           <ion-icon name="search-outline" aria-hidden="true"></ion-icon>
         </button>