-
+
+
+
+
+
-
-
-
+
+
-
-
-
-
-
-
-
-
+
diff --git a/src/main/js/main.js b/src/main/js/main.js
index 5657613..6afc204 100644
--- a/src/main/js/main.js
+++ b/src/main/js/main.js
@@ -1,5 +1,7 @@
// noinspection JSUnresolvedVariable
-const {$, doAfterLoad, footer, header, nav} = window.fwdekker;
+const {$, doAfterLoad} = window.fwdekker;
+// noinspection JSUnresolvedVariable
+const {clearFormValidity, showInputInvalid} = window.fwdekker.validation;
function toUppercaseAt(string, index) {
@@ -8,23 +10,9 @@ function toUppercaseAt(string, index) {
doAfterLoad(() => {
- $("#nav").appendChild(nav("/Tools/Debreviator/"));
- $("#header").appendChild(header({
- title: "Debreviator",
- description: "Creates meaning by undoing your abbreviation"
- }));
- $("#footer").appendChild(footer({
- vcsURL: "https://git.fwdekker.com/tools/debreviator/",
- version: "v%%VERSION_NUMBER%%"
- }));
- $("main").classList.remove("hidden");
- $("[autofocus]").focus();
-});
-
-doAfterLoad(() => {
+ const debreviateForm = $("#debreviate-form");
const abbreviationInput = $("#abbreviation");
const abbreviationError = $("#abbreviation-error");
- const debreviateButton = $("#debreviate");
const debreviationOutput = $("#debreviations");
@@ -39,9 +27,10 @@ doAfterLoad(() => {
};
const debreviate = () => {
+ clearFormValidity(debreviateForm);
const abbreviation = abbreviationInput.value.trim();
if (abbreviation === "") {
- showError("Abbreviation should be non-empty.");
+ showInputInvalid(abbreviationInput, "Abbreviation should be non-empty.");
return;
}
@@ -75,11 +64,13 @@ doAfterLoad(() => {
});
};
- debreviateButton.addEventListener("click", debreviate);
- abbreviationInput.addEventListener("keypress", event => {
- if (event.key === "Enter") {
- debreviate();
- event.preventDefault();
- }
+ debreviateForm.addEventListener("submit", event => {
+ event.preventDefault();
+ debreviate();
});
+
+
+ // Show page to user
+ $("main").classList.remove("hidden");
+ $("[autofocus]").focus();
});