From 0cdec632b73eac3520f570c989e3bab249f462de Mon Sep 17 00:00:00 2001 From: "Felix W. Dekker" Date: Sat, 25 Jan 2020 18:36:29 +0100 Subject: [PATCH] Remove error labels --- index.html | 102 ++++++++++++++++++----------------------------------- 1 file changed, 35 insertions(+), 67 deletions(-) diff --git a/index.html b/index.html index ceb23c9..8bab8b7 100644 --- a/index.html +++ b/index.html @@ -24,10 +24,16 @@ } - .invisible { - display: none; + .row .column.quiz-button-column { + display: flex; + align-items: flex-end; } + .row .column.quiz-button-column .quiz-button { + margin-bottom: 15px; + } + + .success-message { color: var(--success-color); } @@ -77,41 +83,32 @@
-
+
-
- - -   - +
+
-
+
-
- - -   - +
+
-
+
-
- - -   - +
+
@@ -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());