From 6a93af5bf0d6324e6439fd427a51eab30bf9b0ea Mon Sep 17 00:00:00 2001 From: Sawan Date: Wed, 30 Oct 2024 16:19:29 +0530 Subject: [PATCH] Added search functionality on blog page --- frontend/src/pages/Blogs.js | 101 +++++++++++++++++++-------------- frontend/src/styles/output.css | 4 ++ 2 files changed, 61 insertions(+), 44 deletions(-) diff --git a/frontend/src/pages/Blogs.js b/frontend/src/pages/Blogs.js index cad5397d..dd95444b 100644 --- a/frontend/src/pages/Blogs.js +++ b/frontend/src/pages/Blogs.js @@ -1,3 +1,27 @@ +const blogPosts = [ + { + title: "Mastering Vocabulary: 10 Words to Boost Your Language Skills", + excerpt: "Expand your vocabulary and improve your language proficiency with these essential words...", + date: "2023-05-15", + tags: "Vocabulary, Learning Tips", + imagePath: "../assets/blog/4.webp" + }, + { + title: "Essential Grammar Rules for Clear Communication", + excerpt: "Master these fundamental grammar rules to enhance your language skills and communicate more effectively...", + date: "2023-05-20", + tags: "Grammar, Writing", + imagePath: "../assets/blog/2.webp" + }, + { + title: "Mastering Pronunciation: Tips and Tricks", + excerpt: "Improve your accent and speak more clearly with these pronunciation techniques...", + date: "2023-05-25", + tags: "Pronunciation, Speaking", + imagePath: "../assets/blog/3.webp" + } +]; + export function renderBlogs(container) { container.innerHTML = `
@@ -7,29 +31,9 @@ export function renderBlogs(container) {
-
+
- ${renderBlogPost( - "Mastering Vocabulary: 10 Words to Boost Your Language Skills", - "Expand your vocabulary and improve your language proficiency with these essential words...", - "2023-05-15", - "Vocabulary, Learning Tips", - "../assets/blog/4.webp" - )} - ${renderBlogPost( - "Essential Grammar Rules for Clear Communication", - "Master these fundamental grammar rules to enhance your language skills and communicate more effectively...", - "2023-05-20", - "Grammar, Writing", - "../assets/blog/2.webp" - )} - ${renderBlogPost( - "Mastering Pronunciation: Tips and Tricks", - "Improve your accent and speak more clearly with these pronunciation techniques...", - "2023-05-25", - "Pronunciation, Speaking", - "../assets/blog/3.webp" - )} + ${renderBlogPosts(blogPosts)}
@@ -41,6 +45,22 @@ export function renderBlogs(container) {
`; + + document.getElementById('search-input').addEventListener('input', function () { + const query = this.value.toLowerCase(); + const filteredPosts = blogPosts.filter(post => + post.title.toLowerCase().includes(query) || + post.excerpt.toLowerCase().includes(query) || + post.tags.toLowerCase().includes(query) + ); + + const blogPostsContainer = document.getElementById('blog-posts-container'); + blogPostsContainer.innerHTML = `
${renderBlogPosts(filteredPosts)}
`; + }); +} + +function renderBlogPosts(posts) { + return posts.map(post => renderBlogPost(post.title, post.excerpt, post.date, post.tags, post.imagePath)).join(''); } function renderBlogPost(title, excerpt, date, tags, imagePath) { @@ -58,19 +78,11 @@ function renderBlogPost(title, excerpt, date, tags, imagePath) { - + - ${tags} + ${tags} -
- - - - - Read More - -
`; } @@ -80,7 +92,7 @@ function renderSearchWidget() {

Search

- + @@ -90,8 +102,8 @@ function renderSearchWidget() { } function renderCategoriesWidget() { - return ` -
+ // Your categories widget code here + return `

Categories

-
- `; +
`; } function renderRecentPostsWidget() { - return ` -
+ // Your recent posts widget code here + return `

Recent Posts

-
- `; +
`; } -function formatDate(dateString) { - const options = { year: 'numeric', month: 'long', day: 'numeric' }; - return new Date(dateString).toLocaleDateString('en-US', options); +function formatDate(date) { + return new Date(date).toLocaleDateString('en-US', { + year: 'numeric', + month: 'long', + day: 'numeric' + }); } diff --git a/frontend/src/styles/output.css b/frontend/src/styles/output.css index 9be83d56..2f8ad882 100644 --- a/frontend/src/styles/output.css +++ b/frontend/src/styles/output.css @@ -1228,6 +1228,10 @@ video { --tw-shadow: var(--tw-shadow-colored); } +.filter { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + .transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;