Added search bar

filter.js

@@ -11,6 +11,10 @@ document.addEventListener('DOMContentLoaded', function () {
         });
     });
 
+    // Add event listener to the search input
+    const searchInput = document.getElementById('searchInput');
+    searchInput.addEventListener('input', applyFilters);
+
     // Initial display of all places
     applyFilters();
 
@@ -37,16 +41,23 @@ function applyFilters() {
     // Get all place boxes
     const placeBoxes = document.querySelectorAll('.place-box');
 
-    // Iterate over place boxes to show/hide based on filters
+    // Get the search input value
+    const searchQuery = searchInput.value.toLowerCase();
+
+    // Iterate over place boxes to show/hide based on filters and search query
     placeBoxes.forEach(function (placeBox) {
         const placeMeal = placeBox.getAttribute('data-meal');
         const placeCuisine = placeBox.getAttribute('data-cuisine').split(' '); // Split into an array
 
         const isMealMatch = selectedMeals.length === 0 || selectedMeals.some(meal => placeMeal.includes(meal));
         const isCuisineMatch = selectedCuisines.length === 0 || selectedCuisines.every(cuisine => placeCuisine.includes(cuisine));
 
-        // Show/hide place box based on filters
-        placeBox.style.display = isMealMatch && isCuisineMatch ? 'block' : 'none';
+        // Add search functionality
+        const placeName = placeBox.querySelector('h3').innerText.toLowerCase();
+        const isSearchMatch = placeName.includes(searchQuery);
+
+        // Show/hide place box based on filters and search query
+        placeBox.style.display = isMealMatch && isCuisineMatch && isSearchMatch ? 'block' : 'none';
     });
 }
 

index.html

@@ -18,6 +18,7 @@
                 <li><img src="cppLogo.jpg" alt="Dining Guide Logo" class="logo-image"></li>
                 <li><a href="#places">Places to Eat</a></li>
                 <li><a href="#blog">Blog</a></li>
+                <input type="text" id="searchInput" placeholder="Search by place...">
             </ul>
         </nav>
     </header>

styles.css

@@ -12,6 +12,10 @@ header {
     padding: 15px; /* Increased padding for header */
 }
 
+nav {
+    margin-left: 600px;
+}
+
 nav ul {
     list-style-type: none;
     margin: 0;
@@ -35,6 +39,31 @@ nav a {
     transition: color 0.3s, border-bottom-width 0.3s; /* Smooth color and border-bottom-width transition */
 }
 
+/* Add these styles to your existing CSS */
+
+nav input {
+    padding: 10px;
+    border: none;
+    border-radius: 5px;
+    margin-left:300px; /* Adjusted margin for the search bar */
+    font-size: 14px; /* Adjusted font size */
+    width: 200px; /* Adjusted width for the search bar */
+    background-color: #fff; /* Background color */
+    color: #333; /* Text color */
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Box shadow for a subtle lift */
+}
+
+nav input:focus {
+    outline: none;
+    border: 2px solid #0056b3; /* Highlight border on focus with a darker blue color */
+    box-shadow: 0 0 5px rgba(0, 86, 179, 0.5); /* Adjusted box shadow on focus */
+}
+
+/* Add a transition effect for a smooth visual change */
+nav input {
+    transition: all 0.3s;
+}
+
 nav a::after {
     content: '';
     display: block;