+
-
-
-
-
-
+
+
@@ -151,24 +148,6 @@
return Math.floor(Math.random() * (max - min + 1) + min);
}
- /**
- * Given an expected value and an actual value, interprets the actual value as a weekday and returns `null` if they
- * are equal; returns an empty string if they are not equal; and returns an error message otherwise.
- *
- * @param expected the weekday that `actual` should be equal to
- * @param actual the weekday to compare to `expected`
- */
- function compareWeekdays(expected, actual) {
- switch (DoomsdayDate.expandDayString(actual)) {
- case expected:
- return null;
- case undefined:
- return "Unrecognized day of week.";
- default:
- return "";
- }
- }
-
/**
* An input that can be validated.
@@ -181,13 +160,11 @@
*
* @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, button) {
+ constructor(input, titleLabel, button) {
this.input = input;
this.titleLabel = titleLabel;
- this.errorLabel = errorLabel;
this.button = button;
this.button.addEventListener("click", () => this.onSubmit());
@@ -207,25 +184,24 @@
onSubmit() {
this.input.dataset["entered"] = "true";
- const errorMessage = this.validate(this.input.value);
- if (errorMessage === null) {
+ if (this.isValid(this.input.value)) {
this.showSuccess();
this.onValidInput();
} else {
- this.showError(errorMessage);
+ this.showError();
this.selectInput();
this.onInvalidInput();
}
}
/**
- * Returns `null` if the input is valid, or an error message explaining why it is invalid otherwise.
+ * Returns `true` if and only if the input is valid.
*
* This method **must** be implemented by subclasses.
*
* @param value the value of the input to validate
*/
- validate(value) {
+ isValid(value) {
throw new Error("Implement this method.");
}
@@ -263,25 +239,20 @@
}
/**
- * Marks the input as invalid and displays an error label with the given message.
- *
- * @param message the error message to display
+ * Marks the input as invalid.
*/
- showError(message) {
- this.input.setCustomValidity(message || "Invalid");
+ showError() {
+ this.input.setCustomValidity("Incorrect");
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");
}
/**
- * Marks the input as valid and hides the error label.
+ * Marks the input as valid.
*/
showSuccess() {
this.input.setCustomValidity("");
@@ -289,9 +260,6 @@
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");
}
@@ -429,8 +397,8 @@
let quizDate;
const centuryInput = new class extends ValidatableInput {
- validate(value) {
- return compareWeekdays(quizDate.getCenturyAnchorString(), value);
+ isValid(value) {
+ return DoomsdayDate.expandDayString(value) === quizDate.getCenturyAnchorString();
}
onValidInput() {
@@ -445,10 +413,10 @@
updateTitle() {
this.titleLabel.innerText = `Anchor day of century starting in ${quizDate.getCentury() * 100}?`;
}
- }($("#century-input"), $("#century-title-label"), $("#century-error-label"), $("#century-submit"));
+ }($("#century-input"), $("#century-title-label"), $("#century-submit"));
const yearInput = new class extends ValidatableInput {
- validate(value) {
- return compareWeekdays(quizDate.getYearAnchorString(), value);
+ isValid(value) {
+ return DoomsdayDate.expandDayString(value) === quizDate.getYearAnchorString();
}
onValidInput() {
@@ -463,10 +431,10 @@
updateTitle() {
this.titleLabel.innerText = `Doomsday of year ${quizDate.date.getFullYear()}?`;
}
- }($("#year-input"), $("#year-title-label"), $("#year-error-label"), $("#year-submit"));
+ }($("#year-input"), $("#year-title-label"), $("#year-submit"));
const dayInput = new class extends ValidatableInput {
- validate(value) {
- return compareWeekdays(quizDate.getWeekdayString(), value);
+ isValid(value) {
+ return DoomsdayDate.expandDayString(value) === quizDate.getWeekdayString();
}
onValidInput() {
@@ -481,7 +449,7 @@
updateTitle() {
this.titleLabel.innerText = `Weekday of ${quizDate.date.toISOString().substr(0, 10)}?`;
}
- }($("#day-input"), $("#day-title-label"), $("#day-error-label"), $("#day-submit"));
+ }($("#day-input"), $("#day-title-label"), $("#day-submit"));
const resetButton = $("#reset-button");
resetButton.addEventListener("click", () => reloadQuiz());