diff --git a/index.html b/index.html
index 47c6657..ceb23c9 100644
--- a/index.html
+++ b/index.html
@@ -18,26 +18,42 @@
integrity="sha256-Ro/wP8uUi8LR71kwIdilf78atpu8bTEwrK5ZotZo+Zc=" crossorigin="anonymous" />
@@ -60,23 +76,52 @@
@@ -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";
-
- const errorMessage = this.validate(this.input.value);
- if (errorMessage === null) {
- this.showSuccess();
- this.onValidInput();
- } else {
- this.showError(errorMessage);
- this.selectInput();
- this.onInvalidInput();
- }
+ this.onSubmit();
+ event.preventDefault();
});
}
+ /**
+ * 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());
/**