Add submit buttons and inline forms

index.html

@@ -18,26 +18,42 @@
           integrity="sha256-Ro/wP8uUi8LR71kwIdilf78atpu8bTEwrK5ZotZo+Zc=" crossorigin="anonymous" />
     <link rel="stylesheet" href="https://static.fwdekker.com/css/milligram-common.css" crossorigin="anonymous" />
     <style>
+        :root {
+            --error-color: red;
+            --success-color: green;
+        }
+
+
         .invisible {
             display: none;
         }
 
         .success-message {
-            color: green;
+            color: var(--success-color);
         }
 
         .error-message {
-            color: red;
+            color: var(--error-color);
+        }
+
+        .success-box {
+            background-color: var(--success-color);
+            border-color: var(--success-color);
+        }
+
+        .error-box {
+            background-color: var(--error-color);
+            border-color: var(--error-color);
         }
 
         input[data-entered=true]:valid {
-            border-color: green;
+            border-color: var(--success-color);
-            color: green;
+            color: var(--success-color);
         }
 
         input[data-entered=true]:invalid {
-            border-color: red;
+            border-color: var(--error-color);
-            color: red;
+            color: var(--error-color);
         }
     </style>
 </head>
@@ -60,23 +76,52 @@
     <!-- Input -->
     <section class="container">
         <form>
-            <p>
+            <div class="row">
-                <label for="century-input" id="century-title-label">Century</label>
+                <div class="column column-66">
-                <input type="text" id="century-input" autocomplete="off" autofocus />
+                    <label for="century-input" id="century-title-label">Century</label>
-                <span class="error-message invisible" id="century-error-label"></span>
+                    <input type="text" id="century-input" autocomplete="off" autofocus />
-            </p>
+                </div>
+                <div class="column column-34">
+                    <label>&#8203;</label>
+                    <button type="button" id="century-submit">Submit</button>
+                    &nbsp;
+                    <span class="error-message invisible" id="century-error-label"></span>
+                </div>
+            </div>
 
-            <p>
+            <div class="row">
-                <label for="year-input" id="year-title-label">Year</label>
+                <div class="column column-66">
-                <input type="text" id="year-input" autocomplete="off" />
+                    <label for="year-input" id="year-title-label">Year</label>
-                <span class="error-message invisible" id="year-error-label"></span>
+                    <input type="text" id="year-input" autocomplete="off" />
-            </p>
+                </div>
+                <div class="column column-34">
+                    <label>&#8203;</label>
+                    <button type="button" id="year-submit">Submit</button>
+                    &nbsp;
+                    <span class="error-message invisible" id="year-error-label"></span>
+                </div>
+            </div>
 
-            <p>
+            <div class="row">
-                <label for="day-input" id="day-title-label">Day</label>
+                <div class="column column-66">
-                <input type="text" id="day-input" autocomplete="off" />
+                    <label for="day-input" id="day-title-label">Day</label>
-                <span class="error-message invisible" id="day-error-label"></span>
+                    <input type="text" id="day-input" autocomplete="off" />
-            </p>
+                </div>
+                <div class="column column-34">
+                    <label>&#8203;</label>
+                    <button type="button" id="day-submit">Submit</button>
+                    &nbsp;
+                    <span class="error-message invisible" id="day-error-label"></span>
+                </div>
+            </div>
+
+            <div class="row">&#8203;</div>
+
+            <div class="row">
+                <div class="column">
+                    <button type="button" id="reset-button">Reset</button>
+                </div>
+            </div>
         </form>
     </section>
 
@@ -137,31 +182,42 @@
          * @param input the input that is validatable
          * @param titleLabel the label with the `labelFor` property for the input given as the first parameter
          * @param errorLabel the label to display errors in
+         * @param button the submission button that activates validation
          */
-        constructor(input, titleLabel, errorLabel) {
+        constructor(input, titleLabel, errorLabel, button) {
             this.input = input;
             this.titleLabel = titleLabel;
             this.errorLabel = errorLabel;
+            this.button = button;
 
+            this.button.addEventListener("click", () => this.onSubmit());
             this.input.addEventListener("keydown", event => {
                 if (event.key !== "Enter")
                     return;
 
-                this.input.dataset["entered"] = "true";
+                this.onSubmit();
-
+                event.preventDefault();
-                const errorMessage = this.validate(this.input.value);
-                if (errorMessage === null) {
-                    this.showSuccess();
-                    this.onValidInput();
-                } else {
-                    this.showError(errorMessage);
-                    this.selectInput();
-                    this.onInvalidInput();
-                }
             });
         }
 
 
+        /**
+         * Handles the user submitting the input.
+         */
+        onSubmit() {
+            this.input.dataset["entered"] = "true";
+
+            const errorMessage = this.validate(this.input.value);
+            if (errorMessage === null) {
+                this.showSuccess();
+                this.onValidInput();
+            } else {
+                this.showError(errorMessage);
+                this.selectInput();
+                this.onInvalidInput();
+            }
+        }
+
         /**
          * Returns `null` if the input is valid, or an error message explaining why it is invalid otherwise.
          *
@@ -200,9 +256,10 @@
             this.input.dataset["entered"] = "false";
 
             this.showSuccess();
-            this.titleLabel.classList.remove("success-message");
-
             this.updateTitle();
+
+            this.titleLabel.classList.remove("success-message");
+            this.button.classList.remove("success-box");
         }
 
         /**
@@ -215,8 +272,12 @@
 
             this.titleLabel.classList.remove("success-message");
             this.titleLabel.classList.add("error-message");
+
             this.errorLabel.classList.remove("invisible");
             this.errorLabel.innerText = message;
+
+            this.button.classList.remove("success-box");
+            this.button.classList.add("error-box");
         }
 
         /**
@@ -227,8 +288,12 @@
 
             this.titleLabel.classList.remove("error-message");
             this.titleLabel.classList.add("success-message");
+
             this.errorLabel.classList.add("invisible");
             this.errorLabel.innerText = "";
+
+            this.button.classList.remove("error-box");
+            this.button.classList.add("success-box");
         }
 
         /**
@@ -380,7 +445,7 @@
             updateTitle() {
                 this.titleLabel.innerText = `Anchor day of century starting in ${quizDate.getCentury() * 100}?`;
             }
-        }($("#century-input"), $("#century-title-label"), $("#century-error-label"));
+        }($("#century-input"), $("#century-title-label"), $("#century-error-label"), $("#century-submit"));
         const yearInput = new class extends ValidatableInput {
             validate(value) {
                 return compareWeekdays(quizDate.getYearAnchorString(), value);
@@ -398,7 +463,7 @@
             updateTitle() {
                 this.titleLabel.innerText = `Doomsday of year ${quizDate.date.getFullYear()}?`;
             }
-        }($("#year-input"), $("#year-title-label"), $("#year-error-label"));
+        }($("#year-input"), $("#year-title-label"), $("#year-error-label"), $("#year-submit"));
         const dayInput = new class extends ValidatableInput {
             validate(value) {
                 return compareWeekdays(quizDate.getWeekdayString(), value);
@@ -406,7 +471,7 @@
 
             onValidInput() {
                 this.input.value = DoomsdayDate.expandDayString(this.input.value);
-                reloadQuiz();
+                resetButton.focus();
             }
 
             onInvalidInput() {
@@ -416,7 +481,10 @@
             updateTitle() {
                 this.titleLabel.innerText = `Weekday of ${quizDate.date.toISOString().substr(0, 10)}?`;
             }
-        }($("#day-input"), $("#day-title-label"), $("#day-error-label"));
+        }($("#day-input"), $("#day-title-label"), $("#day-error-label"), $("#day-submit"));
+
+        const resetButton = $("#reset-button");
+        resetButton.addEventListener("click", () => reloadQuiz());
 
 
         /**