00:12 I'm using the Stimulus UMD build for this example. However, the stimulus docs have the instructions on how to build with Webpack. The UMD version adds Stimulus as a global, and we have to do a few extra steps to get things going.
00:43 The first thing that we're going to need to do in our controller is add some targets. We do this by declaring static targets, and this is going to be an array. These targets basically match DOM elements, so it's how our controller talks to the DOM. We'll call the first one output.
01:23 We'll do this by adding another data attribute. Next, let's hook up our state to our output. This can be done in an initialization callback, which is invoked when the controller's first instantiated. The way we talk to the targeted HTML is by specifying the name output target as camelCase and assign a value to it. We retrieve our state by using the data get method that comes baked into Stimulus.
01:49 Next, let's ask some of the event handlers to increment and decrement. We'll do this by adding some methods to our class, one called increment and the other called decrement. We'll assign these handlers to our HTML as actions. We also do that with the data attribute. The action begins with the controller name, which is Counter, followed by a #, and then the name of the method we want to invoke.
02:38 We create a Count property that holds the value of our state. When an action is invoked, the setter automatically calls the data set method, and the output of the new state is rendered.