StimulusX counter example

by allmarkedup

HTML

<div data-controller="counter">
  <h4 data-bind-attr="class~counter#displayClasses" class="output">
    <span data-bind-text="counter#count"></span> of
    <span data-bind-text="counter#max"></span>
  </h4>

  <button data-action="counter#increment">⬆️</button>
  <button
    data-bind-attr="disabled~counter#count:lte(0)"
    data-action="counter#decrement"
  >⬇️</button>
</div>

CSS

.text-red {
  color: red;
}

.text-green {
  color: green;
}

.font-bold {
  font-weight: bold;
}

h4 {
  display: inline-block;
  padding-inline: 5px;
  font-size: 20px;
  font-family: sans-serif;
  margin: 0;
}

button {
  border: 0;
  font-size: 20px;
  padding: 0;
  cursor: pointer;
  margin-inline: 2px;
}

JavaScript

import {
  Application,
  Controller,
} from "https://cdn.skypack.dev/@hotwired/stimulus";
import StimulusX from "https://cdn.skypack.dev/[email protected]";

window.Stimulus = Application.start();
StimulusX.init(Stimulus);

Stimulus.register(
  "counter",
  class extends Controller {
    initialize() {
      this.count = 0;
      this.max = 5;
    }

    increment() {
      this.count++;
    }

    decrement() {
      this.count--;
    }

    get displayClasses() {
      return {
        "text-green": this.count <= this.max,
        "text-red font-bold": this.count > this.max,
      };
    }
  },
);