Stimulus is self-described as "A modest JavaScript framework for the HTML you already have".

This collection will show you how to build a Stimulus controller that allows a user to filter a collection of DOM elements based on a variety of inputs.

You'll learn:

* How to connect a Stimulus controller
* What an `action` and a `target` are, and how they work
* Modern JavaScript to make filtering a collection simple
* Techniques to make your code extensible and reusable

In this lesson, we'll take an existing HTML structure and connect it to a Stimulus controller. We'll also look at adding an "action" to a form input as well as setting an element as a "target" to connect all the dots to make a Stimulus controller functional.

Connect A Stimulus Controller To Existing HTML

In this lesson, we'll explore what it takes to connect a user input event to a Stimulus controller method, using a Stimulus `action`. In doing so, we'll be able to filter down a collection of DOM elements, grouped by a Stimulus `target`, to show relevant filtered content to the user as they type.

We'll also learn about some incredibly useful JavaScript features, including `Array.from`, `String.includes`, and a little known feature of `classList.toggle`. Once you get down to the actual Stimulus controller code, it's "just JavaScript"!

Connect An Event To a Stimulus Controller Action

In this lesson, we'll add various inputs that allow a user to filter a collection of data using different sets of data to search through.

We'll take advantage of Stimulus `targets` to make it simple to find _which_ collection the user wants to search for. Stimulus also provides a nice way to get **all** `targets` of a certain name as an array. We'll take a look at how that makes life easy when need to iterate over a collection of DOM nodes.

Filter Various Collections Using Stimulus Targets

What happens when an input value format doesn't _exactly_ match the the format of the data to filter by?

In this lesson, we'll explore the problem of using `input type="date"` to filter down a collection of elements with a `date` field using Stimulus.

To solve this problem, we'll introduce a tiny date utility library, [`dayjs`](https://day.js.org/), to get both date formats the same so the collection can be filtered.

Filter Transformed Data In A Stimulus Controller Action

The more generic you can make your Stimulus controllers, the better.

We'll explore how to put more control in the hands of the consumer of your Stimulus controller by providing a data attribute configure a controller (and a fallback, in case an attribute isn't provided).

We'll also look at how we can make your code "open for extension, but closed for modification" (part of [SOLID](https://en.wikipedia.org/wiki/SOLID)). We'll refactor a ternary operator to use an object literal lookup. This will help make a method "do one thing" (bordering on "single responsibility principle", the S in SOLID).

Filter a Collection Using Stimulus

Instructor

Course content (5 lessons)

Instructor