Add input validation
This commit is contained in:
parent
85c6534a7e
commit
27419d2359
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "debreviator",
|
||||
"version": "0.0.2",
|
||||
"version": "0.0.3",
|
||||
"description": "Creates meaning by undoing your abbreviation.",
|
||||
"author": "F.W. Dekker",
|
||||
"browser": "dist/bundle.js",
|
||||
|
|
|
@ -1,3 +1,11 @@
|
|||
:root {
|
||||
--error-color: red;
|
||||
}
|
||||
|
||||
#debreviations {
|
||||
height: 20em;
|
||||
}
|
||||
|
||||
#abbreviation-error {
|
||||
color: var(--error-color);
|
||||
}
|
||||
|
|
|
@ -39,8 +39,14 @@
|
|||
<input id="abbreviation" type="text" autofocus />
|
||||
|
||||
<button id="debreviate" type="button">Debreviate</button>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<div class="row">
|
||||
<div class="column">
|
||||
<label for="debreviations">Debreviations</label>
|
||||
<span id="abbreviation-error"></span>
|
||||
<textarea id="debreviations" readonly></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -22,9 +22,28 @@ doAfterLoad(() => {
|
|||
});
|
||||
|
||||
doAfterLoad(() => {
|
||||
const abbreviationInput = $("#abbreviation");
|
||||
const abbreviationError = $("#abbreviation-error");
|
||||
const debreviateButton = $("#debreviate");
|
||||
const debreviationOutput = $("#debreviations");
|
||||
|
||||
|
||||
const showError = (message) => {
|
||||
if (message === undefined) {
|
||||
abbreviationError.innerText = "";
|
||||
debreviationOutput.classList.remove("hidden");
|
||||
} else {
|
||||
abbreviationError.innerText = message;
|
||||
debreviationOutput.classList.add("hidden");
|
||||
}
|
||||
};
|
||||
|
||||
const debreviate = () => {
|
||||
const abbreviation = $("#abbreviation").value.trim();
|
||||
if (abbreviation === "") return;
|
||||
const abbreviation = abbreviationInput.value.trim();
|
||||
if (abbreviation === "") {
|
||||
showError("Abbreviation should be non-empty.");
|
||||
return;
|
||||
}
|
||||
|
||||
const regex = new RegExp(abbreviation.split("").join(".*"));
|
||||
|
||||
|
@ -45,11 +64,19 @@ doAfterLoad(() => {
|
|||
)[0]
|
||||
)
|
||||
)
|
||||
.then(matches => $("#debreviations").value = matches.join("\n"));
|
||||
.then(matches => {
|
||||
if (matches.length === 0) {
|
||||
showError("No debreviations found.");
|
||||
return;
|
||||
}
|
||||
|
||||
debreviationOutput.value = matches.join("\n");
|
||||
showError();
|
||||
});
|
||||
};
|
||||
|
||||
$("#debreviate").addEventListener("click", debreviate);
|
||||
$("#abbreviation").addEventListener("keypress", event => {
|
||||
debreviateButton.addEventListener("click", debreviate);
|
||||
abbreviationInput.addEventListener("keypress", event => {
|
||||
if (event.key === "Enter") {
|
||||
debreviate();
|
||||
event.preventDefault();
|
||||
|
|
Loading…
Reference in New Issue