Add a search function to the projects page

[jdingeman]

Overview

The projects page needs a search box so that a user can search all of the projects by keywords. This issue is to implement the final design for the search box.

Action Items

• Add a search box at the top of the projects to reflect the design in Figma
• Similar to a user using ctrl + f to find a word on a webpage, the user can search any word or words from the descriptions of the projects
  • The difference would be that the search function will narrow down the projects rendered on the page based on user input
• Include functionality for boolean operators for users to refine their search
  • Only use operators AND, OR and -

Boolean Operators	Meaning	Example
AND	Limit results	Vegetarianism AND obesity(Search for content that contains both vegetarianism and obesity.)
OR	One term OR another	Scholarly OR academic(Search for content that contains scholarly OR academic.)
-	Exclude a term from the search	Bears -Chicago(Limits results to only those with bears and not the term Chicago.)

• Make the appropriate changes to the CSS, HTML, and JS as you need to
• The goal is to make this component reusable on multiple pages so it can be used for current and future pages
• Once you have submitted the PR, please write up what files go into the search bar component and any other details that a person adding the same component to another page (e.g., toolkit page) will need to know. You can leave that write up here in this issue as a comment.

Resources/Instructions

• See the final figma design
  • see toolkit mobile figma latest for search inspo
• In the _includes page you should find the current-projects.html
• In the assets/js folder you should find project.js
• Standardized Components wiki

[Adastros]

Reviewed and moving back to prioritized backlog.

[github-actions]

Hi @Thinking-Panda, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:-
i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?)
ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)

[Thinking-Panda]

Availability: M-F 10 AM -3PM
ETA: July 7

[github-actions]

@Thinking-Panda

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Tuesday, June 27, 2023 at 12:17 AM PST.}

[Thinking-Panda]

Progress: I have worked on the HTML and CSS part. I am working on the Js file.
Blockers: Had trouble debugging on VS Code and now I am debugging on the browser. It kind of slows me down as docker takes time to reload
Availability: M-F 2-3 hrs
ETA: 7/12
Pictures (optional):

[ronaldpaek]

The more I think about the search box I am wondering is this feature going to be used more for desktop users or mobile? I don't think mobile users will want to type that much, and if they do is it going to just be fuzzy searching? Cause it seems like the updates the UI everytime the URL value changes and it's probably parsing the data very specifically.

Is keyword search meant to be something that's suppose to be robust and have many combinations plus also work with the current checkboxes as in append to the end of it? and vice versa are they supposed to work in sync and add a checkbox and remove a checkbox if I reference it again??

I think u could have the output of the current search params display on the search by keywords bar and you can add stuff to id I think that would be feasible, but I don't know how visually appealing that would be?

@t-will-gillis @roslynwythe

[Thinking-Panda]

Documentation:

• Add the form with the search textbox and buttons to the webpage's html file.
• Style properties for the form is coded in _sass\elements\_search-bar.scss which is already imported into main.scss
• Changes made to the Js file include adding events related to the search bar and adding necessary functions to get the expected results.
  • 4 events added are focus and keydown events for the textbox, click events for the buttons.
  • new functions added are searchOnFocusEventHandler(), searchEnterKeyHandler(e), searchEventHandler(), searchCloseEventHandler().
  • Changes were also made to checkBoxEventHandler() to update search/filter parameters, updateCategoryCounter(), updateProjectCardDisplayState() to add search functionality with different operators, projectCardComponent() to include more data-* attribute to enable search in specified areas.