tfofurn
/
doomsday
forked from tools/doomsday
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Remove error labels

This commit is contained in:
Florine W. Dekker 2020-01-25 18:36:29 +01:00
parent 023ba26c33
commit 0cdec632b7
Signed by untrusted user: FWDekker
GPG Key ID: B1B567AF58D6EE0F
1 changed files with 35 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
index.html
View File

@ -24,10 +24,16 @@
} }
.invisible { .row .column.quiz-button-column {
display: none; display: flex;
align-items: flex-end;
} }
.row .column.quiz-button-column .quiz-button {
margin-bottom: 15px;
}
.success-message { .success-message {
color: var(--success-color); color: var(--success-color);
} }
@ -77,41 +83,32 @@
<section class="container"> <section class="container">
<form> <form>
<div class="row"> <div class="row">
<div class="column column-66"> <div class="column column-90">
<label for="century-input" id="century-title-label">Century</label> <label for="century-input" id="century-title-label">Century</label>
<input type="text" id="century-input" autocomplete="off" autofocus /> <input type="text" id="century-input" autocomplete="off" autofocus />
</div> </div>
<div class="column column-34"> <div class="column column-10 quiz-button-column">
<label>&#8203;</label> <button type="button" class="quiz-button" id="century-submit">Check</button>
<button type="button" id="century-submit">Submit</button>
&nbsp;
<span class="error-message invisible" id="century-error-label"></span>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="column column-66"> <div class="column column-90">
<label for="year-input" id="year-title-label">Year</label> <label for="year-input" id="year-title-label">Year</label>
<input type="text" id="year-input" autocomplete="off" /> <input type="text" id="year-input" autocomplete="off" />
</div> </div>
<div class="column column-34"> <div class="column column-10 quiz-button-column">
<label>&#8203;</label> <button type="button" class="quiz-button" id="year-submit">Check</button>
<button type="button" id="year-submit">Submit</button>
&nbsp;
<span class="error-message invisible" id="year-error-label"></span>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="column column-66"> <div class="column column-90">
<label for="day-input" id="day-title-label">Day</label> <label for="day-input" id="day-title-label">Day</label>
<input type="text" id="day-input" autocomplete="off" /> <input type="text" id="day-input" autocomplete="off" />
</div> </div>
<div class="column column-34"> <div class="column column-10 quiz-button-column">
<label>&#8203;</label> <button type="button" class="quiz-button" id="day-submit">Check</button>
<button type="button" id="day-submit">Submit</button>
&nbsp;
<span class="error-message invisible" id="day-error-label"></span>
</div> </div>
</div> </div>
@ -151,24 +148,6 @@
return Math.floor(Math.random() * (max - min + 1) + min); 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. * An input that can be validated.
@ -181,13 +160,11 @@
* *
* @param input the input that is validatable * @param input the input that is validatable
* @param titleLabel the label with the `labelFor` property for the input given as the first parameter * @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 * @param button the submission button that activates validation
*/ */
constructor(input, titleLabel, errorLabel, button) { constructor(input, titleLabel, button) {
this.input = input; this.input = input;
this.titleLabel = titleLabel; this.titleLabel = titleLabel;
this.errorLabel = errorLabel;
this.button = button; this.button = button;
this.button.addEventListener("click", () => this.onSubmit()); this.button.addEventListener("click", () => this.onSubmit());
@ -207,25 +184,24 @@
onSubmit() { onSubmit() {
this.input.dataset["entered"] = "true"; this.input.dataset["entered"] = "true";
const errorMessage = this.validate(this.input.value); if (this.isValid(this.input.value)) {
if (errorMessage === null) {
this.showSuccess(); this.showSuccess();
this.onValidInput(); this.onValidInput();
} else { } else {
this.showError(errorMessage); this.showError();
this.selectInput(); this.selectInput();
this.onInvalidInput(); 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. * This method **must** be implemented by subclasses.
* *
* @param value the value of the input to validate * @param value the value of the input to validate
*/ */
validate(value) { isValid(value) {
throw new Error("Implement this method."); throw new Error("Implement this method.");
} }
@ -263,25 +239,20 @@
} }
/** /**
* Marks the input as invalid and displays an error label with the given message. * Marks the input as invalid.
*
* @param message the error message to display
*/ */
showError(message) { showError() {
this.input.setCustomValidity(message || "Invalid"); this.input.setCustomValidity("Incorrect");
this.titleLabel.classList.remove("success-message"); this.titleLabel.classList.remove("success-message");
this.titleLabel.classList.add("error-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.remove("success-box");
this.button.classList.add("error-box"); this.button.classList.add("error-box");
} }
/** /**
* Marks the input as valid and hides the error label. * Marks the input as valid.
*/ */
showSuccess() { showSuccess() {
this.input.setCustomValidity(""); this.input.setCustomValidity("");
@ -289,9 +260,6 @@
this.titleLabel.classList.remove("error-message"); this.titleLabel.classList.remove("error-message");
this.titleLabel.classList.add("success-message"); this.titleLabel.classList.add("success-message");
this.errorLabel.classList.add("invisible");
this.errorLabel.innerText = "";
this.button.classList.remove("error-box"); this.button.classList.remove("error-box");
this.button.classList.add("success-box"); this.button.classList.add("success-box");
} }
@ -429,8 +397,8 @@
let quizDate; let quizDate;
const centuryInput = new class extends ValidatableInput { const centuryInput = new class extends ValidatableInput {
validate(value) { isValid(value) {
return compareWeekdays(quizDate.getCenturyAnchorString(), value); return DoomsdayDate.expandDayString(value) === quizDate.getCenturyAnchorString();
} }
onValidInput() { onValidInput() {
@ -445,10 +413,10 @@
updateTitle() { updateTitle() {
this.titleLabel.innerText = `Anchor day of century starting in ${quizDate.getCentury() * 100}?`; 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 { const yearInput = new class extends ValidatableInput {
validate(value) { isValid(value) {
return compareWeekdays(quizDate.getYearAnchorString(), value); return DoomsdayDate.expandDayString(value) === quizDate.getYearAnchorString();
} }
onValidInput() { onValidInput() {
@ -463,10 +431,10 @@
updateTitle() { updateTitle() {
this.titleLabel.innerText = `Doomsday of year ${quizDate.date.getFullYear()}?`; 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 { const dayInput = new class extends ValidatableInput {
validate(value) { isValid(value) {
return compareWeekdays(quizDate.getWeekdayString(), value); return DoomsdayDate.expandDayString(value) === quizDate.getWeekdayString();
} }
onValidInput() { onValidInput() {
@ -481,7 +449,7 @@
updateTitle() { updateTitle() {
this.titleLabel.innerText = `Weekday of ${quizDate.date.toISOString().substr(0, 10)}?`; 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"); const resetButton = $("#reset-button");
resetButton.addEventListener("click", () => reloadQuiz()); resetButton.addEventListener("click", () => reloadQuiz());