Defining a controller

The purpose of the controller is to connect the DOM with JavaScript. It will bind the inputs to a variable and the events that we indicate to a function created inside the controller.

The structure is as follows:

import { Controller } from "../vendors/stimulus.js".
 
export default class extends Controller {
 
   // Variables linked to inputs.
   static targets = [ "input1" ]
 
   // Constructor or function to be executed when the
   // controller is loaded.
   connect() {
   }
   // Simple function
   myFunction(event) {
   }
}

We have imported the Controller class that belongs to the framework itself with a combination of import and from. Then, we created a class that extends Controller and is also accessible from an import (export default). Inside, we have an example of a target called input1 and...