tools
/
doomsday
1
0
Fork 1
Code Issues 6 Pull Requests Releases Activity

Improve error and success state styling

This commit is contained in:
Florine W. Dekker 2020-01-25 17:30:26 +01:00
parent 6d44e7a1d5
commit b8de002541
Signed by: FWDekker
GPG Key ID: B1B567AF58D6EE0F
1 changed files with 33 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
index.html
View File

@ -22,16 +22,22 @@
display: none; display: none;
} }
.success-message {
color: green;
}
.error-message { .error-message {
color: red; color: red;
} }
input[data-entered=true]:valid { input[data-entered=true]:valid {
background-color: green; border-color: green;
color: green;
} }
input[data-entered=true]:invalid { input[data-entered=true]:invalid {
background-color: red; border-color: red;
color: red;
} }
</style> </style>
</head> </head>
@ -54,17 +60,23 @@
<!-- Input --> <!-- Input -->
<section class="container"> <section class="container">
<form> <form>
<label for="century-input" id="century-title-label">Century</label> <p>
<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 />
<span class="error-message invisible" id="century-error-label"></span>
</p>
<label for="year-input" id="year-title-label">Year</label> <p>
<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" />
<span class="error-message invisible" id="year-error-label"></span>
</p>
<label for="day-input" id="day-title-label">Day</label> <p>
<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" />
<span class="error-message invisible" id="day-error-label"></span>
</p>
</form> </form>
</section> </section>
@ -106,7 +118,7 @@
case expected: case expected:
return null; return null;
case undefined: case undefined:
return "Unrecognized day of week"; return "Unrecognized day of week.";
default: default:
return ""; return "";
} }
@ -139,7 +151,7 @@
const errorMessage = this.validate(this.input.value); const errorMessage = this.validate(this.input.value);
if (errorMessage === null) { if (errorMessage === null) {
this.hideError(); this.showSuccess();
this.onValidInput(); this.onValidInput();
} else { } else {
this.showError(errorMessage); this.showError(errorMessage);
@ -187,7 +199,9 @@
this.input.value = ""; this.input.value = "";
this.input.dataset["entered"] = "false"; this.input.dataset["entered"] = "false";
this.hideError(); this.showSuccess();
this.titleLabel.classList.remove("success-message");
this.updateTitle(); this.updateTitle();
} }
@ -199,6 +213,8 @@
showError(message) { showError(message) {
this.input.setCustomValidity(message || "Invalid"); this.input.setCustomValidity(message || "Invalid");
this.titleLabel.classList.remove("success-message");
this.titleLabel.classList.add("error-message");
this.errorLabel.classList.remove("invisible"); this.errorLabel.classList.remove("invisible");
this.errorLabel.innerText = message; this.errorLabel.innerText = message;
} }
@ -206,9 +222,11 @@
/** /**
* Marks the input as valid and hides the error label. * Marks the input as valid and hides the error label.
*/ */
hideError() { showSuccess() {
this.input.setCustomValidity(""); this.input.setCustomValidity("");
this.titleLabel.classList.remove("error-message");
this.titleLabel.classList.add("success-message");
this.errorLabel.classList.add("invisible"); this.errorLabel.classList.add("invisible");
this.errorLabel.innerText = ""; this.errorLabel.innerText = "";
} }