clement/finite-state-automaton
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add a clear button

Browse Source
This commit is contained in:
Clément Fréville
2024-01-08 19:42:52 +01:00
parent 6a5888640c
commit 947b539b1d
3 changed files with 14 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
index.html
View File

@@ -9,10 +9,13 @@
</head> </head>
<body> <body>
<div id="app"> <div id="app">
<input type="text" id="word-input" autocapitalize="off" spellcheck="false" /> <div class="input">
<input type="text" id="word-input" autocapitalize="off" spellcheck="false" />
<div id="light"></div>
</div>
<div class="input"> <div class="input">
<div id="input-buttons"></div> <div id="input-buttons"></div>
<div id="light"></div> <button id="clear-button">Clear</button>
</div> </div>
<pre id="pen"></pre> <pre id="pen"></pre>
<pre id="state-graph"></pre> <pre id="state-graph"></pre>

9
src/fsm.js
View File

@@ -6,6 +6,7 @@ const IS_INVALID = 'is-invalid';
const wordInput = /** @type {HTMLInputElement} */ (document.getElementById('word-input')); const wordInput = /** @type {HTMLInputElement} */ (document.getElementById('word-input'));
const buttons = /** @type {HTMLDivElement} */ (document.getElementById('input-buttons')); const buttons = /** @type {HTMLDivElement} */ (document.getElementById('input-buttons'));
const clearButton = /** @type {HTMLButtonElement} */ (document.getElementById('clear-button'));
const light = /** @type {HTMLDivElement} */ (document.getElementById('light')); const light = /** @type {HTMLDivElement} */ (document.getElementById('light'));
mermaid.initialize({ mermaid.initialize({
@@ -80,7 +81,6 @@ for (const letter of alphabet) {
// Reacts to input in the text box // Reacts to input in the text box
wordInput.addEventListener('input', () => { wordInput.addEventListener('input', () => {
const value = wordInput.value; const value = wordInput.value;
console.log(value);
builder = ''; builder = '';
state = 0; state = 0;
for (const letter of value) { for (const letter of value) {
@@ -91,4 +91,11 @@ wordInput.addEventListener('input', () => {
} }
}); });
clearButton.addEventListener('click', () => {
wordInput.value = '';
builder = '';
state = 0;
updateUIState();
});
updateUIState(); updateUIState();

2
src/style.css
View File

@@ -36,10 +36,10 @@ h1 {
.input { .input {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 0.5em;
} }
input { input {
padding: 0.3em 0.5em; padding: 0.3em 0.5em;
margin-bottom: 0.5em;
font-size: 1.1em; font-size: 1.1em;
width: 6em; width: 6em;
background-color: transparent; background-color: transparent;