added functionality for search icon

Author: Anvita Prasad

.DS_Store

@@ -30,6 +30,9 @@
                     </div>
             </ul>
             <i class="fas fa-search search"></i>
+            <div id="search-container">
+                <input type="text" id="search-input" class="search-input" placeholder="Search...">
+            </div>
         </nav>
         <div class="homepage-description">
             <span class="homepage-desc-heading">Chicago</span>

Band Website/index.html

@@ -12,4 +12,50 @@ for(i=0;i<=0;i++){
     modalClose[i].addEventListener("click",()=>{
         modal.style.display="none";
     })
-}
+}
+document.querySelector('.search').addEventListener('click', function(event) {
+    const searchContainer = document.getElementById('search-container');
+    const searchInput = document.getElementById('search-input');
+    
+    event.stopPropagation();
+
+    searchContainer.classList.toggle('active');
+    searchInput.classList.toggle('active');
+
+    if (searchInput.classList.contains('active')) {
+        searchInput.focus();
+    }
+});
+
+document.addEventListener('click', function(event) {
+    const searchContainer = document.getElementById('search-container');
+    const searchInput = document.getElementById('search-input');
+
+    if (!searchContainer.contains(event.target) && searchInput.classList.contains('active')) {
+        searchContainer.classList.remove('active');
+        searchInput.classList.remove('active');
+    }
+});
+
+function highlightText(searchTerm) {
+    const elementsToSearch = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, div, span, li'); // Add more tags if necessary
+
+    const searchRegex = new RegExp(`(${searchTerm})`, 'gi');
+
+    elementsToSearch.forEach(element => {
+        const innerHTML = element.innerHTML;
+
+        const highlightedHTML = innerHTML.replace(searchRegex, '<span class="highlight">$1</span>');
+        
+        element.innerHTML = highlightedHTML;
+    });
+}
+
+document.getElementById('search-input').addEventListener('keydown', function(event) {
+    if (event.key === 'Enter') {
+        const searchTerm = event.target.value.trim();
+        if (searchTerm) {
+            highlightText(searchTerm);
+        }
+    }
+});

Band Website/script.js

@@ -54,12 +54,50 @@ a:hover{
 }
 
 /*search bar*/
-.search{
-        color: white;
-        float: right;
-        font-size: 25px;
-        padding: 15px;
-        margin-right: 10px;      
+
+.search {
+    color: white;
+    float: right;
+    font-size: 25px;
+    padding: 15px;
+    margin-right: 10px;
+    cursor: pointer;
+}
+
+
+#search-container {
+    display: none;  
+    width: 100%;
+    text-align: center;  
+    position: absolute;
+    top: 60px;  
+    left: 0;
+}
+
+.search-input {
+    width: 50%;
+    padding: 12px;
+    font-size: 16px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);  
+    transition: transform 0.5s ease, opacity 0.5s ease;  
+    opacity: 0;  
+    transform: translateY(-20px);  
+}
+
+#search-container.active {
+    display: block;
+}
+
+.search-input.active {
+    opacity: 1;  
+    transform: translateY(0);  
+}
+.highlight {
+    background-color: yellow;  
+    font-weight: bold;
+    color: black;  
 }
 
 /**homepage description**/