Adding a filter feature

After adding the form functionality, the next feature I implemented was a filter sidebar. This would allow for filtering by type of place once the search results appear.

Goal:

If a checkbox is checked and the array items’ “description” match when the Filter button is clicked, the items with the corresponding type of place will be displayed.

Process:

• (HTML) Create the filter section using an Aside in HTML, then add checkbox inputs and their accompanying labels and a button.
• (JS) Use an array filter on the server array containing all the items based on if a box is checked and a description.

if (
checkedSupermarket && place.description === "Supermarket"
|| checkedPark && place.description === "Park"
|| checkedTourist && place.description === "Tourist attraction"
|| checkedRetail && place.description === "Retail"
|| checkedRestaurant && place.description === "Restaurant"
){
return true
}
else {
return false
}

I paired the booleans for each checkbox with its corresponding description and made it so that both must be true for that part of the filter to work. I also made each checkbox independent so that results could be stacked using the || operator.

Then, voila, we have a filter panel capable of allowing the user to check multiple criteria and reveal the corresponding results!