Add input validation

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",

src/main/css/main.css

@@ -1,3 +1,11 @@
+:root {
+    --error-color: red;
+}
+
 #debreviations {
     height: 20em;
 }
+
+#abbreviation-error {
+    color: var(--error-color);
+}

src/main/index.html

@@ -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>

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();
+        const abbreviation = abbreviationInput.value.trim();
-        if (abbreviation === "") return;
+        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);
+    debreviateButton.addEventListener("click", debreviate);
-    $("#abbreviation").addEventListener("keypress", event => {
+    abbreviationInput.addEventListener("keypress", event => {
         if (event.key === "Enter") {
             debreviate();
             event.preventDefault();