Skip to content
This repository has been archived by the owner on Dec 9, 2024. It is now read-only.

Feat: Searching feature on the main page; close #18 #19

Open
wants to merge 17 commits into
base: main
Choose a base branch
from

Conversation

yacmov
Copy link
Collaborator

@yacmov yacmov commented Jun 2, 2024

System

Main system Test system using different IDE Test system using different platform
macOS macOS Windows 11 Arm
VS Code PyCharm VS Code

Agendar

Solution Description:

  1. Create a search input bar: Create an input element <input type="search"> to serve as the search bar. This allows users to enter their search terms.
  2. Implement Real-Time Search: Use a JavaScript event listener attached to the search var to capture user input dynamically and ensures the search function updates immediately as the user types.

Solutions

  1. Search Logic:
    Apply id in search input id="search-in" and div container as class="continue-items" to search.
const inputElement = document.getElementById('search-in');
const searchResults = document.querySelectorAll(".continue-items");
  1. Filtering and Display Update:
    If the card matches the search term, apply remove('hidden') in container card of continue-items, on the other hand, if the card doesn't match the search term apply add('hidden')
    This effectively removes the card from the displayed results.

  2. Error Handling:

  • Empty search term: it will display all the items (apply remove("hidden") to all container cards of continue-items
  • Dons't match search term: hide all the container cards

Example video

Previous version doesn't have search bar, User can see all the added items.

previous.mp4

With search bar can able to search specific names of videos

updated_feature.mp4

@yacmov yacmov added feature Feature to implement good first issue Good for newcomers labels Jun 2, 2024
@yacmov yacmov self-assigned this Jun 2, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
feature Feature to implement good first issue Good for newcomers
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant