Hello stimulusjs

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

<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>

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>

https://unpkg.com/stimulus/dist/stimulus.umd.js

https://unpkg.com/d3