Add a clear button

6 months ago · 947b539b1d
parent 6a5888640c
commit 947b539b1d
3 changed files with 14 additions and 4 deletions
--- a/index.html
+++ b/index.html
@ -9,11 +9,14 @@
  </head>
  <body>
    <div id="app">
-      <input type="text" id="word-input" autocapitalize="off" spellcheck="false" />
      <div class="input">
-        <div id="input-buttons"></div>
+        <input type="text" id="word-input" autocapitalize="off" spellcheck="false" />
        <div id="light"></div>
      </div>
+      <div class="input">
+        <div id="input-buttons"></div>
+        <button id="clear-button">Clear</button>
+      </div>
      <pre id="pen"></pre>
      <pre id="state-graph"></pre>
    </div>
--- a/src/fsm.js
+++ b/src/fsm.js
@ -6,6 +6,7 @@ const IS_INVALID = 'is-invalid';

 const wordInput = /** @type {HTMLInputElement} */ (document.getElementById('word-input'));
 const buttons = /** @type {HTMLDivElement} */ (document.getElementById('input-buttons'));
+const clearButton = /** @type {HTMLButtonElement} */ (document.getElementById('clear-button'));
 const light = /** @type {HTMLDivElement} */ (document.getElementById('light'));

 mermaid.initialize({
@ -80,7 +81,6 @@ for (const letter of alphabet) {
 // Reacts to input in the text box
 wordInput.addEventListener('input', () => {
  const value = wordInput.value;
-  console.log(value);
  builder = '';
  state = 0;
  for (const letter of value) {
@ -91,4 +91,11 @@ wordInput.addEventListener('input', () => {
  }
 });

+clearButton.addEventListener('click', () => {
+  wordInput.value = '';
+  builder = '';
+  state = 0;
+  updateUIState();
+});
+
 updateUIState();
--- a/src/style.css
+++ b/src/style.css
@ -36,10 +36,10 @@ h1 {
 .input {
  display: flex;
  align-items: center;
+  margin-bottom: 0.5em;
 }
 input {
  padding: 0.3em 0.5em;
-  margin-bottom: 0.5em;
  font-size: 1.1em;
  width: 6em;
  background-color: transparent;