Add playground demo 2

jahirultusar · jahirultusar · commit a0c029669bf2 · 2025-08-17T08:30:05.000+01:00
diff --git a/index.html b/index.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>string-utils-lite Playground</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      padding: 20px;
+      max-width: 600px;
+      margin: auto;
+    }
+    input {
+      width: 100%;
+      padding: 10px;
+      margin-bottom: 20px;
+      font-size: 16px;
+    }
+    table {
+      width: 100%;
+      border-collapse: collapse;
+    }
+    th, td {
+      border: 1px solid #ccc;
+      padding: 8px 10px;
+      text-align: left;
+    }
+    th {
+      background: #f4f4f4;
+    }
+  </style>
+</head>
+<body>
+  <h1>string-utils-lite Playground</h1>
+  <p>Type something below to see transformations:</p>
+  <input id="textInput" type="text" placeholder="Type here...">
+
+  <table>
+    <thead>
+      <tr>
+        <th>Function</th>
+        <th>Result</th>
+      </tr>
+    </thead>
+    <tbody id="results"></tbody>
+  </table>
+
+  <script type="module">
+    import { 
+      capitalize, 
+      titleCase, 
+      toKebabCase, 
+      toSnakeCase, 
+      toCamelCase, 
+      toPascalCase 
+    } from "https://esm.sh/string-utils-lite";
+
+    const input = document.getElementById("textInput");
+    const results = document.getElementById("results");
+
+    const functions = {
+      capitalize,
+      titleCase,
+      toKebabCase,
+      toSnakeCase,
+      toCamelCase,
+      toPascalCase
+    };
+
+    function updateResults(value) {
+      results.innerHTML = "";
+      for (const [name, fn] of Object.entries(functions)) {
+        const tr = document.createElement("tr");
+        tr.innerHTML = `<td>${name}</td><td>${fn(value)}</td>`;
+        results.appendChild(tr);
+      }
+    }
+
+    input.addEventListener("input", (e) => {
+      updateResults(e.target.value);
+    });
+
+    // initialize with empty string
+    updateResults("");
+  </script>
+</body>
+</html>
