diff --git a/package.json b/package.json
index 5e63c7f..463a2f2 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/src/main/css/main.css b/src/main/css/main.css
index 15b57f0..feebdde 100644
--- a/src/main/css/main.css
+++ b/src/main/css/main.css
@@ -1,3 +1,11 @@
+:root {
+ --error-color: red;
+}
+
#debreviations {
height: 20em;
}
+
+#abbreviation-error {
+ color: var(--error-color);
+}
diff --git a/src/main/index.html b/src/main/index.html
index 19d2153..b2b1362 100644
--- a/src/main/index.html
+++ b/src/main/index.html
@@ -39,8 +39,14 @@
+
+
+
+
diff --git a/src/main/js/main.js b/src/main/js/main.js
index 7f7d75d..e62d2c7 100644
--- a/src/main/js/main.js
+++ b/src/main/js/main.js
@@ -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();