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.

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!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store