Merge pull request #10 from Sugata23/searchBar

redesigning the search-bar
Aclaputra · Oct 13, 2023 · 3e7d1b6 · 3e7d1b6
2 parents 87961fb + 7d59c21
commit 3e7d1b6
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -37,15 +37,37 @@
                 <!-- masukkin input search -->
 
                 <li class="header-content hp-viewport-hide fa-searchs"><a href="#" class="fas fa-search"></a></li>
-                <input class="search" placeholder="search" type="search" name="">
+                <!-- <input class="search" placeholder="search" type="search" name=""> -->
+                <!-- <li><a href="#" class="search"><i class="fas fa-search"></i></a></li>  -->
+                <li>
+                    <div class="search search-container">
+                        <div class="search-icon" id="searchIcon"><i class="fas fa-search"></i></div>
+                        <div class="search-dropdown" id="searchDropdown">
+                            <input type="text" placeholder="Search...">
+                            <button>Search</button>
+                        </div>
+                    </div>
+                </li>
                 <!-- masukkin input search -->
 
                 <li class="header-content hp-viewport header-shoping"><a href="https://www.apple.com/us/shop/goto/bag" class="fas fa-shopping-bag"></a></li>
             </ul>
-
         </div>
-    </div>
     </header>
+    <!-- <nav>
+        <ul>
+            <li><a href="#"><i class="fab fa-apple"></i></a></li>
+            <li><a href="#">Mac</a></li>  
+            <li><a href="#">iPad</a></li>  
+            <li><a href="#">iPhone</a></li>  
+            <li><a href="#">Watch</a></li>  
+            <li><a href="#">TV</a></li>  
+            <li><a href="#">Music</a></li>  
+            <li><a href="#">Service</a></li>  
+            <li><a href="#"><i class="fas fa-search"></i></a></li>  
+            <li><a href="#"><i class="fas fa-shopping-bag"></i></a></li>  
+        </ul>
+    </nav> -->
     <!-- header -->
 
     <main>
@@ -313,6 +335,6 @@ <h3>Apple Store</h3>
     </footer>
 
 
-
+    <script src="script.js"></script>
 </body>
 </html>
diff --git a/script.js b/script.js
@@ -0,0 +1,10 @@
+const searchIcon = document.getElementById('searchIcon');
+const searchDropdown = document.getElementById('searchDropdown');
+
+searchIcon.addEventListener('click', function() {
+    if (searchDropdown.style.display === 'none' || searchDropdown.style.display === '') {
+        searchDropdown.style.display = 'block';
+    } else {
+        searchDropdown.style.display = 'none';
+    }
+});
diff --git a/style.css b/style.css
@@ -26,6 +26,15 @@ header {
     color: rgba(255, 253, 253, 0.87);
     background-color: rgba(0,0,0,0.92);
     z-index: 10;
+    /* display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(0,0,0,0.92);
+    width: 100%;
+    position: fixed;
+    color: rgba(255, 253, 253, 0.87); */
+    /* backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px); */
   }
 
 
@@ -83,13 +92,48 @@ span{
 
 
 .search{
-    margin-top:10px;
+    /* margin-top:10px;
     margin-bottom:10px;
     margin-right:30px;
     float:right;
     background-color: rgba(0,0,0,0.92);
-    border-radius:10px;
+    border-radius:10px; */
+
+}
+/* search btn */
+.search-container {
+    position: relative;
+}
+
+.search-dropdown {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 200px;
+    padding: 10px;
+    background-color: white;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 }
+
+.search-dropdown input {
+    width: 100%;
+    padding: 8px;
+    margin-bottom: 10px;
+}
+
+.search-dropdown button {
+    background-color: #333;
+    color: white;
+    border: none;
+    padding: 8px 15px;
+    cursor: pointer;
+}
+
+.search-dropdown button:hover {
+    background-color: #555;
+}
+
 /* header */