Merge pull request #559 from AnvitaPrasad/main

Added functionality for search icon in Band Website
Ayushparikh-code · Oct 29, 2024 · c115e37 · c115e37
2 parents b95b9a1 + 2018754
commit c115e37
Show file tree

Hide file tree

Showing 7 changed files with 204 additions and 49 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/Art-Gallery/.vscode/settings.json b/Art-Gallery/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/Art-Gallery/index.html b/Art-Gallery/index.html
@@ -14,6 +14,7 @@
     <div class="header">
         <a href="#container">MY ART</a>
         <a href="#about">ABOUT</a>
+        <a href="#contact">CONTACT ME</a> 
     </div>
     <div id="container">
         <div class="half">
@@ -35,26 +36,28 @@
                 tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue
                 gravida diam non fringilla. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta
                 lectus vitae, ultricies congue gravida diam non fringilla.</p>
+            </div>
+            <div id="contact"> 
+                <div class="input">
+                    <p class="red">Do not hesitate to contact me!</p>
+                </div>
+                <div class="input">
+                    <span>Name</span>
+                    <input type="text">
+                </div>
+                <div class="input">
+                    <span>Email</span>
+                    <input type="text">
+                </div>
+                <div class="input">
+                    <span>Message</span>
+                    <input type="text">
+                </div>
+                <div class="input">
+                    <input class="button" type="button" value="Send">
+                </div>
+            </div>
         </div>
-        <div class="input">
-            <p class="red">Do not hesitate to contact me!</p>
-        </div>
-        <div class="input">
-            <span>Name</span>
-            <input type="text">
-        </div>
-        <div class="input">
-            <span>Email</span>
-            <input type="text">
-        </div>
-        <div class="input">
-            <span>Message</span>
-            <input type="text">
-        </div>
-        <div class="input">
-            <input class="button" type="button" value="Send">
-        </div>
-    </div>
 
     <div class="footer">
         Made by ❤Jugesh Raghav

diff --git a/Art-Gallery/mobile.css b/Art-Gallery/mobile.css
@@ -1,23 +1,85 @@
-*{
-    margin:0;
-    padding:0;
-}
-@media (max-width:595px){
-    #container{
-        display:grid;
-        grid-template-columns:auto;
-    }
-    .header{
-        padding-top:30px;
-        padding-bottom:30px;
-        padding-right: 10px;
-        padding-left:10px;
-    }
-    img{
-        width:250px;
-        height:300px;
-    }
-    .footer{
-        padding:10px
-    }
-}
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f4f4f4;
+}
+
+.header {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    background-color: #333;
+    padding: 15px 0;
+    color: white;
+    font-size: 18px;
+}
+
+.header a {
+    color: white;
+    text-decoration: none;
+    transition: color 0.3s;
+}
+
+.header a:hover {
+    color: #ff6347;
+}
+
+#container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    padding: 20px;
+}
+
+.half {
+    flex: 1;
+    max-width: 45%;
+    margin: 10px;
+}
+
+img {
+    width: 100%;
+    border-radius: 8px;
+}
+
+.about-block {
+    padding: 20px;
+}
+
+.red {
+    color: red;
+}
+
+.input {
+    margin: 10px 0;
+}
+
+.input span {
+    display: block;
+    margin-bottom: 5px;
+}
+
+.button {
+    padding: 10px 15px;
+    background-color: #333;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.button:hover {
+    background-color: #ff6347;
+}
+
+.footer {
+    text-align: center;
+    padding: 15px;
+    background-color: #333;
+    color: white;
+}
diff --git a/Band Website/index.html b/Band Website/index.html
@@ -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>

diff --git a/Band Website/script.js b/Band Website/script.js
@@ -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);
+        }
+    }
+});
diff --git a/Band Website/style.css b/Band Website/style.css
@@ -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**/