Update Project Filters: Remove OR Logic Across and Within Filter Categories

[caz002]

Overview

The 'Languages/Technologies/Tools' filter on the homepage and project page currently uses both OR logic and AND logic across different categories. We need to update the filter to only use AND logic across all categories and within the same category to make the filter easier to navigate.

Details

Because the languages and Technologies are actually two different lists, it's currently applying an OR logic to values in the same list and an AND logic to values when the values come from different lists

• If you choose Languge: Python and Language: Javascript, it applies the OR logic.
• If you choose Language: Javascript and Technolgy: Angular, it applies the AND logic.

The change this issue makes will apply AND no matter which list the value is coming from.

Action Items

Open file assets/js/current-projects.js. Go toupdateProjectCardDisplayState()

• We need to modify line 517 so it returns true if the project card does not contain any items in inUrl, ensuring AND logic within the same category.

  • Delete ( inCard.filter(x => inUrl.includes(x)) ).length == 0 and replace it with!inUrl.every(x => inCard.includes(x))

• On line 586, to create AND logic across all categories, we should exit early if we find a condition the project does not meet. Wrap line 586 in an if statement like so:

   if (cardsToHideContainer.length > 0){
       cardsToHideContainer.map(item => document.getElementById(`${item[1]}`).style.display = 'none');
       break;
   }

• Look through the rest of updateProjectDisplayState(), and check if the code now uses AND logic across all categories and within the same category. Make any other appropriate changes to ensure the logic is consistent.

• Ensure that the search function's OR logic continues to work as expected when multiple keywords are entered in the 'Search by Keywords' field (for example, 'Python OR JavaScript' returns all projects that use Python or JavaScript).

• Verify the changes by testing 'Languages/Technologies/Tools' filter logic in your local environment and include before and after screenshots with your pull request

Resources/Instructions

Homepage URL: www.hackforla.org
Projects URL: www.hackforla.org
current-projects.js(updateProjectCardDisplayState())