diff --git a/app.js b/app.js index 8d44280..fa09355 100644 --- a/app.js +++ b/app.js @@ -1,6 +1,8 @@ // Global variables let isLoading = false; let currentPostCount = 0; +let allPosts = []; // Store all posts for search functionality +let filteredPosts = []; // Store currently displayed posts const POSTS_CACHE_KEY = "cached_posts_100"; const CACHE_EXPIRY_TIME = 5 * 60 * 1000; // 5 minutes @@ -116,13 +118,36 @@ function createPostElement(post) { return postElement; } +// Function to update search results counter +function updateSearchResultsCount() { + const searchResultsElement = document.getElementById("search-results"); + const searchInput = document.getElementById("search-input"); + + if (searchResultsElement && searchInput) { + const searchTerm = searchInput.value.trim().toLowerCase(); + const count = searchTerm ? filteredPosts.length : allPosts.length; + + if (searchResultsElement) { + searchResultsElement.textContent = searchTerm + ? `${filteredPosts.length} post${filteredPosts.length !== 1 ? 's' : ''} found` + : `${allPosts.length} post${allPosts.length !== 1 ? 's' : ''}`; + } + } +} + function renderPosts(posts) { const container = document.getElementById("posts-container"); - + + // Clear container + container.innerHTML = ""; + posts.forEach((post) => { const postElement = createPostElement(post); container.appendChild(postElement); }); + + // Update search results counter + updateSearchResultsCount(); } // Cache management functions @@ -166,6 +191,52 @@ function clearCachedPosts() { } } +// Search functionality +function performSearch() { + const searchInput = document.getElementById("search-input"); + const searchTerm = searchInput.value.trim().toLowerCase(); + + if (searchTerm === "") { + // Show all posts if search is empty + filteredPosts = [...allPosts]; + renderPosts(filteredPosts); + return; + } + + // Filter posts by title (case-insensitive partial match) + filteredPosts = allPosts.filter(post => + post.title && + post.title.toLowerCase().includes(searchTerm) + ); + + renderPosts(filteredPosts); +} + +// Initialize search functionality +function initializeSearch() { + const searchInput = document.getElementById("search-input"); + if (searchInput) { + // Add debouncing to search for better performance + let searchTimeout; + searchInput.addEventListener("input", () => { + clearTimeout(searchTimeout); + searchTimeout = setTimeout(performSearch, 300); // 300ms delay + }); + + // Add search results counter + const searchResults = document.createElement("div"); + searchResults.id = "search-results"; + searchResults.className = "search-results"; + searchResults.textContent = "Loading posts..."; + + // Insert search results counter after the header + const header = document.querySelector(".header"); + if (header) { + header.parentNode.insertBefore(searchResults, header.nextSibling); + } + } +} + // Extract real title from base_url function extractRealTitleFromUrl(baseUrl) { if (!baseUrl || typeof baseUrl !== "string") { @@ -236,7 +307,9 @@ async function loadInitialPosts() { if (cachedPosts && cachedPosts.length > 0) { console.log("Loading posts from cache"); - renderPosts(cachedPosts); + allPosts = cachedPosts; + filteredPosts = [...allPosts]; + renderPosts(filteredPosts); currentPostCount = cachedPosts.length; // Check if we have more posts or not @@ -253,7 +326,9 @@ async function loadInitialPosts() { try { console.log("Fetching posts from API"); const posts = await fetchRedditPosts(); - renderPosts(posts); + allPosts = posts; + filteredPosts = [...allPosts]; + renderPosts(filteredPosts); currentPostCount = posts.length; // Cache the posts @@ -284,7 +359,11 @@ async function loadMorePosts() { const morePosts = await fetchMorePosts(currentPostCount); if (morePosts.length > 0) { - renderPosts(morePosts); + // Add new posts to allPosts and filteredPosts + allPosts = [...allPosts, ...morePosts]; + filteredPosts = [...filteredPosts, ...morePosts]; + + renderPosts(filteredPosts); currentPostCount += morePosts.length; } else { // No more posts to load @@ -329,6 +408,7 @@ function setupInfiniteScroll() { document.addEventListener("DOMContentLoaded", () => { loadInitialPosts(); setupInfiniteScroll(); + initializeSearch(); // Add event listener to dark mode toggle button const darkModeToggle = document.getElementById("dark-mode-toggle"); diff --git a/index.html b/index.html index 38f8555..16a261a 100644 --- a/index.html +++ b/index.html @@ -9,8 +9,16 @@
-

Red Head

+
+ 🔍 + +