Hello stimulusjs by fil

index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    .slide {
      display: none;
      font-size: 180px;
    }
    .slide.slide--current {
      display: block;
    }
  </style>

<head>
<body>
  
  <div data-controller="slideshow">
  <button data-action="slideshow#previous">←</button>
  <button data-action="slideshow#next">→</button>

  <div data-target="slideshow.slide" class="slide slide--current">🐵</div>
  <div data-target="slideshow.slide" class="slide">🙈</div>
  <div data-target="slideshow.slide" class="slide">🙉</div>
  <div data-target="slideshow.slide" class="slide">🙊</div>
</div>
  
  
  <div data-controller="hello">
  <input data-target="hello.name" type="text">
  <button data-action="click->hello#greet">Greet</button>
  </div>
  <p/>
  <div>Using <a href="https://github.com/stimulusjs/stimulus">stimulusjs</a></div>

  <script src="https://unpkg.com/stimulus/dist/stimulus.umd.js"></script>
  <script src="https://unpkg.com/d3"></script>
  <script>
(function() {
  const application = Stimulus.Application.start();
  application.register(
    "hello",
    class extends Stimulus.Controller {
      greet() {
        d3.select("p").html(`Hello, ${this.name}!`);
      }

      get name() {
        return this.targets.find("name").value;
      }
    }
  );

  application.register(
    "slideshow",
    class extends Stimulus.Controller {
      initialize() {
        this.render();
      }

      next() {
        if (this.index < this.lastIndex) {
          this.index++;
        }
      }

      previous() {
        if (this.index > 0) {
          this.index--;
        }
      }

      render() {
        this.slideElements.forEach((element, index) => {
          element.classList.toggle("slide--current", index == this.index);
        });
      }

      get index() {
        if (this.data.has("index")) {
          return parseInt(this.data.get("index"));
        } else {
          return 0;
        }
      }

      set index(value) {
        this.data.set("index", value);
        this.render();
      }

      get lastIndex() {
        return this.slideElements.length - 1;
      }

      get slideElements() {
        return this.targets.findAll("slide");
      }
    }
  );
})();

  </script>
  
  </body>
</html>