From 55dc33eadf4bc0b6e23adda8ce168c8d843a9daa Mon Sep 17 00:00:00 2001
From: Bhakti <99724683+BhaktiMore18@users.noreply.github.com>
Date: Mon, 21 Oct 2024 13:40:43 +0000
Subject: [PATCH] added search-bar to the blogs page

---
 views/blogs.ejs | 126 +++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 103 insertions(+), 23 deletions(-)

diff --git a/views/blogs.ejs b/views/blogs.ejs
index 1e88b0b..6394835 100644
--- a/views/blogs.ejs
+++ b/views/blogs.ejs
@@ -1,26 +1,106 @@
 <%- include("partials/header"); -%>
-    <div class="grid grid-columns-3 gap-3 px-3" style="margin-bottom:5%;">
-        <% blogs.forEach(function(blog) { %>
-            <div class="card"
-                style="display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 10px;">
-                <div class="card-header">
-                    <a href="/blogs/<%= blog.title %>"><img src="<%= blog.image %>" class="card-image"/ alt="Image not Available"></a> 
-                </div>
-                <div class="card-body card-hover" style="width: max-width; height: max-content;">
-                    <h2 class="card-title">
-                        <a href="/blogs/<%= blog.title %>"><%= blog.title %></a>
-                    </h2>
-                    <div class="card-content">
-                        <p class="card-text">
-                            <%= blog.content.substring(0, 100) + " ..." %>
-                        </p>
-                    </div>
-                </div>
-                <div class="card-footer" style="width: 100px;align-self: flex-end; margin-right: 20px;">
-                    <a href="/blogs/<%= blog.title %>" class="btn btn-primary">Read more</a>
+
+<!-- Search Bar Section -->
+<div class="search-bar-container" style="margin-bottom: 20px; text-align: center;">
+    <div class="search-input-container">
+        <i class="fas fa-search search-icon"></i>
+        <input type="text" id="search-input" placeholder="Search blogs by title..." class="search-input" />
+    </div>
+</div>
+
+<div class="grid grid-columns-3 gap-3 px-3" style="margin-bottom:5%;">
+    <% blogs.forEach(function(blog) { %>
+        <div class="card"
+            style="display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 10px;">
+            <div class="card-header">
+                <a href="/blogs/<%= blog.title %>">
+                    <img src="<%= blog.image %>" class="card-image" alt="Image not Available" />
+                </a>
+            </div>
+            <div class="card-body card-hover" style="width: max-width; height: max-content;">
+                <h2 class="card-title">
+                    <a href="/blogs/<%= blog.title %>"><%= blog.title %></a>
+                </h2>
+                <div class="card-content">
+                    <p class="card-text">
+                        <%= blog.content.substring(0, 100) + " ..." %>
+                    </p>
                 </div>
             </div>
-            <% }); %>
-    </div>
-    </div>
-    <%- include("partials/footer"); -%>
\ No newline at end of file
+            <div class="card-footer" style="width: 100px; align-self: flex-end; margin-right: 20px;">
+                <a href="/blogs/<%= blog.title %>" class="btn btn-primary">Read more</a>
+            </div>
+        </div>
+    <% }); %>
+</div>
+
+<%- include("partials/footer"); -%>
+
+<!-- Styles -->
+<style>
+    .search-bar-container {
+        position: relative;
+        margin-bottom: 20px;
+        text-align: center;
+    }
+
+    .search-input-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 2px solid #007BFF;
+        border-radius: 25px;
+        padding: 5px;
+        width: 300px;
+        transition: border-color 0.3s, box-shadow 0.3s;
+    }
+
+    .search-input {
+        padding: 12px 20px 12px 40px; 
+        border: none; 
+        border-radius: 25px; 
+        font-size: 16px;
+        width: 100%; 
+    }
+
+    .search-input:focus {
+        outline: none;
+        box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
+    }
+
+    .search-icon {
+        color: #007BFF; 
+        font-size: 18px; 
+        position: absolute; 
+        left: 10px; 
+        pointer-events: none; 
+    }
+
+    .search-input::placeholder {
+        color: #3d3939; 
+        font-style: italic; 
+    }
+
+    .search-input:focus::placeholder {
+        color: transparent; 
+    }
+</style>
+
+<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
+<script>
+    const searchInput = document.getElementById('search-input');
+    const cards = document.querySelectorAll('.card');
+
+    searchInput.addEventListener('input', function() {
+        const searchTerm = searchInput.value.toLowerCase();
+        
+        cards.forEach(function(card) {
+            const title = card.querySelector('.card-title a').innerText.toLowerCase();
+            if (title.includes(searchTerm)) {
+                card.style.display = 'flex'; 
+            } else {
+                card.style.display = 'none'; 
+            }
+        });
+    });
+</script>