zackad/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Traffic Count Reader</title>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
    <script type="module">
      import {
        Application,
        Controller,
      } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js"
      window.Stimulus = Application.start()

      Stimulus.register(
        "counter_multiple",
        class extends Controller {
          static targets = ["input", "output"]

          connect() {
            this.inputTarget.addEventListener(
              "keyup",
              this.calculateValue.bind(this)
            )
          }

          calculateValue() {
            const inputData = this.inputTarget.value
            const separator = "asdw"
            const pattern = new RegExp(`(?=[${separator}])`)
            const splitted = _.split(inputData, pattern)
            const groupped = _.groupBy(splitted, (item) => _.head(item))
            let results = {}
            for (let key in groupped) {
              const directionData = groupped[key].join("").replaceAll(key, "")
              results[key] = _.countBy(directionData)
            }

            this.outputTarget.innerHTML = JSON.stringify(results, null, 4)
          }
        }
      )
    </script>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <div class="container mx-auto">
      <div data-controller="counter_multiple">
        <textarea
          data-counter_multiple-target="input"
          type="text"
          class="w-full border p-2 h-64"
        ></textarea>
        <h1 class="text-xl">Hasil</h1>
        <pre data-counter_multiple-target="output"></pre>
      </div>
    </div>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Traffic Count Reader</title>
	<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
	<script type="module">
	import {
	Application,
	Controller,
	} from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js"
	window.Stimulus = Application.start()

	Stimulus.register(
	"counter_multiple",
	class extends Controller {
	static targets = ["input", "output"]

	connect() {
	this.inputTarget.addEventListener(
	"keyup",
	this.calculateValue.bind(this)
	)
	}

	calculateValue() {
	const inputData = this.inputTarget.value
	const separator = "asdw"
	const pattern = new RegExp(`(?=[${separator}])`)
	const splitted = _.split(inputData, pattern)
	const groupped = _.groupBy(splitted, (item) => _.head(item))
	let results = {}
	for (let key in groupped) {
	const directionData = groupped[key].join("").replaceAll(key, "")
	results[key] = _.countBy(directionData)
	}

	this.outputTarget.innerHTML = JSON.stringify(results, null, 4)
	}
	}
	)
	</script>
	<script src="https://cdn.tailwindcss.com"></script>
	</head>
	<body>
	<div class="container mx-auto">
	<div data-controller="counter_multiple">
	<textarea
	data-counter_multiple-target="input"
	type="text"
	class="w-full border p-2 h-64"
	></textarea>
	<h1 class="text-xl">Hasil</h1>
	<pre data-counter_multiple-target="output"></pre>
	</div>
	</div>
	</body>
	</html>