-
+
diff --git a/src/fsm.js b/src/fsm.js
index f0b7681..91b3769 100644
--- 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();
diff --git a/src/style.css b/src/style.css
index 9a6105c..9058ca1 100644
--- 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;