Merge pull request vinayakgavariya#238 from geeky01adarsh/searchbar

Made searchbar responsive
harshal015 · Oct 27, 2022 · bdee2f6 · bdee2f6
2 parents 5e3ba77 + 5bccaa7
commit bdee2f6
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -23,6 +23,7 @@
   <div class="stickheader" id="myHeader">
     <h2 class="brand">PlayListAdda</h2>
     <input id="search_bar" type="text" onkeyup="searchPlaylist()" placeholder="Search Playlists..." />
+    <button id="search-icon" onclick="show_bar()"><img src="https://cdn-icons-png.flaticon.com/512/149/149852.png" width='20px' alt=""> </button>
   </div>
   <h3 class="subtitle"><span class="auto-type"></span></h3>
   <div class="main">

diff --git a/index.js b/index.js
@@ -50,4 +50,9 @@ $(document).ready(function () {
     });
 
 
-  });
+});
+
+function show_bar() {
+  $("#search-icon").hide();
+  $("#search_bar").show();
+}
diff --git a/style.css b/style.css
@@ -386,3 +386,21 @@ html::-webkit-scrollbar-track:hover {
 }
 
 /* End Bottom to Top */
+
+
+
+/* search icon */
+
+#search-icon{
+  display: none;
+}
+
+@media screen and (max-width:500px) {
+  #search-icon{
+    display: contents;
+  }
+  #search_bar{
+    display: none;
+  }
+}
+