[Feature Request]: Implement Dynamic Search and Category Filtering for Destinations #1931
Description
Is there an existing issue for this?
- I have searched the existing issues
Feature Description
I propose an enhancement to the "Explore Destinations" section by implementing a dual-functional discovery system. Currently, the destinations are displayed in a static grid. As the project grows, users need a way to find specific trips without manual scrolling.
Key Components:
Dynamic Search Bar: Real-time text input that filters destination cards by name.
Category Filter Chips: A horizontal set of buttons (All, Beaches, Mountains, Adventure, Cities) to browse by trip type.
Unified Logic: The search and filter systems will work synchronously for a seamless experience.
(Implementation Plan)
HTML: Add a search input field and a container for category buttons above the destination grid.
Data Attributes: Assign data-name and data-category attributes to each destination card for easy targeting.
JavaScript Logic: * Create an event listener for input (search bar) and click (filter chips).
Use a unified function to check if a card matches both the search string and the active category.
Toggle a .hide class (or use display: none) for non-matching cards.
CSS: Design the search bar and chips to be fully responsive and aesthetic.
Use Case
User Problem: A user wants to find "Mount Fuji" but has to manually scan through every card.
Solution: The user types "Fuji" or clicks the "Mountains" chip to instantly isolate relevant results, significantly reducing navigation friction.
Benefits
Enhanced UX/UI: Reduces the "time-to-discovery" for users, making the platform feel like a modern travel application.
Performance & Scalability: Provides a structured way to handle an increasing number of destination cards without cluttering the interface.
Project Maturity: Moves the repository beyond static HTML/CSS by introducing functional, real-time JavaScript logic.
Professional Aesthetic: Uses a clean, pastel-themed UI (lavender/purple accents) to maintain design consistency.
Add ScreenShots/Videos
"Attached is a high-fidelity mockup generated to illustrate the proposed Search and Filter layout. It serves as a visual reference for the placement and the lavender/purple aesthetic I plan to implement."
Priority
Medium
Record
- I have read the Contributing Guidelines
- I'm a KWOC 2025-26 contributor
- I'm a SWOC 2026 contributor
- I have starred the repository