chore: playground with some options (#439)

Co-authored-by: Siah <siah@goodwork.sg>
Trott · May 10, 2024 · 9ca57a2 · 9ca57a2
1 parent bc09656
commit 9ca57a2
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -6,17 +6,44 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   </head>
   <body>
-    <form>
-      <input type="text" id="slug" />
-      <input type="submit" value="Slug it" onclick="slugIt(); return false;"></input>
+    <form id="form" onSubmit="" style="max-width:60ch">
+			<fieldset>
+
+				<label>Input text</label>
+				<input type="text" id="input" placeholder="An Apple computer" autofocus />
+			</fieldset>
+
+
+
+			<fieldset>
+				<label for="replacement">Replacement character</label>
+				<input type="text" id="replacement" name="replacement" placeholder="-" />
+			</fieldset>
+
+
+			<fieldset>
+			<label>
+				<input type="checkbox" name="lowercase" checked /> Lowercase
+			</label>
+			</fieldset>
+
+			<fieldset>
+			<label>
+				<input type="checkbox" name="trim" checked /> Trim leading and trailing replacement characters
+			</label>
+			</fieldset>
+
+			<fieldset>
+			<label>
+				<input type="checkbox" name="fallback" checked /> Fallback
+			</label>
+			</fieldset>
+
+      <input type="submit" value="Slug it"></input>
+
     </form>
     <p>Result: <span id="slugOutput"></span></p>
     <script src="./slug.js"></script>
-    <script>
-      function slugIt() {
-        const output = slug(document.getElementById("slug").value);
-        document.getElementById("slugOutput").innerHTML = output;
-      }
-    </script>
+    <script src="./playground.js"></script>
   </body>
-</html>
+</html>
diff --git a/playground.js b/playground.js
@@ -0,0 +1,31 @@
+const form = document.getElementById('form')
+
+form.addEventListener('submit', function (e) {
+  e.preventDefault()
+  if (form === null) {
+    console.error('form element not found')
+    return
+  }
+
+  const fd = new FormData(form)
+
+  const replacement = fd.get('replacement')
+  const lowercase = fd.get('lowercase')
+  const trim = fd.get('trim')
+  const fallback = fd.get('fallback')
+
+  const opts = {}
+
+  if (replacement.length > 0) {
+    opts.replacement = replacement
+  }
+
+  opts.lower = lowercase !== null
+
+  opts.trim = trim !== null
+
+  opts.fallback = fallback !== null
+
+  const output = window.slug(document.getElementById('input').value, opts)
+  document.getElementById('slugOutput').innerText = output
+})