Add tool to show positions of each character

character-positions/index.html

@@ -0,0 +1,48 @@
+---
+title: Character Positions
+tagline: Numbers the position of each character
+layout: default
+---
+
+<button id="see-example" class="mdc-button mdc-button--raised" type="button">
+  <div class="mdc-button__ripple" aria-hidden="true"></div>
+  <i class="material-icons mdc-button__icon" aria-hidden="true">visibility</i>
+  <span class="mdc-button__label">Show Example</span>
+</button>
+
+<label
+  class="mdc-text-field mdc-text-field--outlined mdc-text-field--textarea mdc-text-field--no-label"
+>
+  <span class="mdc-notched-outline">
+    <span class="mdc-notched-outline__leading"></span>
+    <span class="mdc-notched-outline__trailing"></span>
+  </span>
+  <span class="mdc-text-field__resizer">
+    <textarea
+      id="input-text"
+      class="mdc-text-field__input"
+      aria-label="Paste input"
+    ></textarea>
+  </span>
+</label>
+
+<div id="output"></div>
+
+<template id="table-template">
+  <table>
+    <thead>
+      <tr>
+        <th>#</th>
+        <th>Char</th>
+      </tr>
+    </thead>
+    <tbody></tbody>
+  </table>
+</template>
+
+<template id="row-template">
+  <tr>
+    <th></th>
+    <td></td>
+  </tr>
+</template>

character-positions/scripts.js

@@ -0,0 +1,44 @@
+const textarea = document.getElementById("input-text");
+
+const snakeCaseText = (input) => {
+  const matches = input.match(matchBlocks);
+
+  if (matches) {
+    return matches.map((part) => part.toLowerCase()).join("_");
+  } else {
+    return "Failed to parse";
+  }
+};
+
+textarea.addEventListener("input", (e) => {
+  const outputEl = document.getElementById("output");
+  outputEl.textContent = "";
+  const template = document
+    .getElementById("table-template")
+    .content.cloneNode(true);
+  const tbody = template.querySelector("tbody");
+
+  e.target.value.split("").forEach((character, index) => {
+    const tr = document.getElementById("row-template").content.cloneNode(true)
+      .children[0];
+
+    tr.querySelector("th").textContent = index + 1;
+    tr.querySelector("td").textContent = character;
+
+    tbody.appendChild(tr);
+  });
+
+  outputEl.appendChild(template);
+});
+
+const exampleText = `FooBarBux`;
+
+document.getElementById("see-example").addEventListener("click", () => {
+  textarea.value = exampleText;
+  textarea.dispatchEvent(
+    new Event("input", {
+      bubbles: true,
+      cancelable: true,
+    })
+  );
+});

character-positions/styles.css

@@ -0,0 +1,11 @@
+label.mdc-text-field--textarea,
+pre {
+  margin: auto;
+  clear: both;
+  display: block;
+}
+
+button {
+  margin: 15px auto;
+  text-align: center;
+}