Remove exception on invalid input

Reviewed-on: tools/doomsday#14

Gruntfile.js

@@ -16,7 +16,7 @@ module.exports = grunt => {
         },
         focus: {
             dev: {
-                include: ["css", "html", "js"],
+                include: ["css", "html", "ts"],
             },
         },
         replace: {
@@ -50,24 +50,25 @@ module.exports = grunt => {
                 files: ["src/main/**/*.html"],
                 tasks: ["copy:html"],
             },
-            js: {
-                files: ["src/main/**/*.js"],
+            ts: {
+                files: ["src/main/**/*.ts"],
                 tasks: ["webpack:dev", "replace:dev"],
             },
         },
         webpack: {
             options: {
-                entry: "./src/main/js/main.js",
+                entry: "./src/main/js/Main.ts",
                 module: {
                     rules: [
                         {
-                            test: /\.js$/,
+                            test: /\.ts$/,
+                            use: "ts-loader",
                             exclude: /node_modules/,
                         },
                     ],
                 },
                 resolve: {
-                    extensions: [".js"],
+                    extensions: [".ts"],
                 },
                 output: {
                     filename: "bundle.js",

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 F.W. Dekker
+Copyright (c) 2020 Florine W. Dekker
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package.json

@@ -1,12 +1,12 @@
 {
     "name": "doomsday",
-    "version": "1.3.17",
+    "version": "1.5.3",
     "description": "Test your mastery of Conway's Doomsday rule.",
-    "author": "F.W. Dekker",
+    "author": "Florine W. Dekker",
     "browser": "dist/bundle.js",
     "repository": {
         "type": "git",
-        "url": "git@git.fwdekker.com:FWDekker/doomsday.git"
+        "url": "git@git.fwdekker.com:tools/doomsday.git"
     },
     "private": true,
     "scripts": {
@@ -15,16 +15,22 @@
         "dev:server": "grunt dev:server",
         "deploy": "grunt deploy"
     },
+    "dependencies": {
+        "luxon": "^3.1.1"
+    },
     "devDependencies": {
-        "grunt": "^1.4.1",
+        "@types/luxon": "^3.1.0",
+        "grunt": "^1.5.3",
         "grunt-cli": "^1.4.3",
-        "grunt-contrib-clean": "^2.0.0",
+        "grunt-contrib-clean": "^2.0.1",
         "grunt-contrib-copy": "^1.0.0",
         "grunt-contrib-watch": "^1.1.0",
         "grunt-focus": "^1.0.0",
         "grunt-text-replace": "^0.4.0",
         "grunt-webpack": "^5.0.0",
-        "webpack": "^5.64.0",
-        "webpack-cli": "^4.9.1"
+        "ts-loader": "^9.4.2",
+        "typescript": "^4.9.4",
+        "webpack": "^5.75.0",
+        "webpack-cli": "^5.0.1"
     }
 }

src/main/css/main.css

@@ -1,51 +1,23 @@
-:root {
-    --error-color: red;
-    --success-color: green;
+input, button {
+    width: unset;
 }
 
-
-.row .column.quiz-button-column {
+.inputs {
     display: flex;
-    align-items: flex-end;
 }
 
-.row .column.quiz-button-column .quiz-button {
-    margin-bottom: 15px;
+.inputs input {
+    flex: 1;
+    margin-right: 1rem;
 }
 
-label, summary b {
-    cursor: pointer;
+details[open] summary,
+details summary:focus {
+    /*noinspection CssUnresolvedCustomProperty*/
+    color: var(--accordion-close-summary-color) !important;
 }
 
-#day-title-label {
-    margin-left: 17px;
-}
-
-
-.success-message {
-    color: var(--success-color);
-}
-
-.error-message {
-    color: var(--error-color);
-}
-
-.success-box {
-    background-color: var(--success-color);
-    border-color: var(--success-color);
-}
-
-.error-box {
-    background-color: var(--error-color);
-    border-color: var(--error-color);
-}
-
-input[data-entered=true]:valid {
-    border-color: var(--success-color);
-    color: var(--success-color);
-}
-
-input[data-entered=true]:invalid {
-    border-color: var(--error-color);
-    color: var(--error-color);
+details:not([open]) summary:not(:focus) {
+    /*noinspection CssUnresolvedCustomProperty*/
+    color: var(--accordion-open-summary-color) !important;
 }

src/main/index.html

@@ -3,22 +3,28 @@
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="author" content="F.W. Dekker" />
+    <meta name="author" content="Florine W. Dekker" />
     <meta name="application-name" content="Doomsday" />
     <meta name="description" content="Test your mastery of Conway's Doomsday rule." />
     <meta name="theme-color" content="#0033cc" />
 
+    <meta name="fwd:nav:target" content="#nav" />
+    <meta name="fwd:nav:highlight-path" content="/Tools/Doomsday/" />
+    <meta name="fwd:footer:target" content="#footer" />
+    <meta name="fwd:footer:vcs-url" content="https://git.fwdekker.com/tools/doomsday/" />
+    <meta name="fwd:footer:version" content="v%%VERSION_NUMBER%%" />
+    <meta name="fwd:validation:load-forms" />
+
     <title>Doomsday | FWDekker</title>
 
-    <link rel="stylesheet" href="https://static.fwdekker.com/fonts/roboto/roboto.css" />
-    <link rel="stylesheet" href="https://static.fwdekker.com/lib/template/2.x.x/template.css" />
+    <link rel="stylesheet" href="https://static.fwdekker.com/lib/template/3.x.x/template.css?v=%%VERSION_NUMBER%%" />
     <!--suppress HtmlUnknownTarget -->
     <link rel="stylesheet" href="main.css?v=%%VERSION_NUMBER%%" />
     <script async src="https://stats.fwdekker.com/count.js"
             data-goatcounter="https://stats.fwdekker.com/count"></script>
 </head>
 <body>
-<noscript>
+<noscript class="fwd-js-notice">
     <img src="https://stats.fwdekker.com/count?p=/tools/doomsday/" alt="Counting pixel" />
 
     <p>
@@ -27,66 +33,58 @@
         instructions on how to enable JavaScript in your web browser</a>.
     </p>
 </noscript>
-<main class="hidden">
-    <div id="nav"></div>
-    <div id="contents">
-        <div id="header"></div>
+<nav id="nav"></nav>
+<main class="hidden container">
+    <div role="document">
+        <section>
+            <header class="fwd-header">
+                <hgroup>
+                    <h1><a href=".">Doomsday</a></h1>
+                    <h2>
+                        Test your mastery of
+                        <a href="https://en.wikipedia.org/wiki/Doomsday_rule" target="_blank">Conway's Doomsday rule</a>.
+                    </h2>
+                </hgroup>
+            </header>
+        </section>
 
-        <!-- Input -->
-        <section class="container">
+        <section>
             <form>
                 <details open id="century-details">
-                    <summary><b id="century-title-label">Century</b></summary>
-                    <div class="row">
-                        <div class="column column-90">
-                            <!--suppress HtmlFormInputWithoutLabel -->
-                            <input type="text" id="century-input" autocomplete="off" autofocus />
-                        </div>
-                        <div class="column column-10 quiz-button-column">
-                            <button type="button" class="quiz-button" id="century-submit">Check</button>
-                        </div>
+                    <summary><b id="century-title-label" data-label-for="century-input">Century</b></summary>
+                    <div class="inputs">
+                        <!--suppress HtmlFormInputWithoutLabel -->
+                        <input type="text" id="century-input" class="quiz-input" autocomplete="off" autofocus />
+                        <button type="button" id="century-submit" class="quiz-button">Check</button>
                     </div>
                 </details>
 
                 <details open id="year-details">
-                    <summary><b id="year-title-label">Year</b></summary>
-                    <div class="row">
-                        <div class="column column-90">
-                            <!--suppress HtmlFormInputWithoutLabel -->
-                            <input type="text" id="year-input" autocomplete="off" />
-                        </div>
-                        <div class="column column-10 quiz-button-column">
-                            <button type="button" class="quiz-button" id="year-submit">Check</button>
-                        </div>
+                    <summary><b id="year-title-label" data-label-for="year-input">Year</b></summary>
+                    <div class="inputs">
+                        <!--suppress HtmlFormInputWithoutLabel -->
+                        <input type="text" id="year-input" class="quiz-input" autocomplete="off" />
+                        <button type="button" id="year-submit" class="quiz-button">Check</button>
                     </div>
                 </details>
 
-                <div>
-                    <label for="day-input" id="day-title-label">Day</label>
-                    <div class="row">
-                        <div class="column column-90">
-                            <input type="text" id="day-input" autocomplete="off" />
-                        </div>
-                        <div class="column column-10 quiz-button-column">
-                            <button type="button" class="quiz-button" id="day-submit">Check</button>
-                        </div>
+                <details open id="day-details">
+                    <summary><b id="day-title-label" data-label-for="day-input">Day</b></summary>
+                    <div class="inputs">
+                        <!--suppress HtmlFormInputWithoutLabel -->
+                        <input type="text" id="day-input" class="quiz-input" autocomplete="off" />
+                        <button type="button" id="day-submit" class="quiz-button">Check</button>
                     </div>
-                </div>
+                </details>
 
-                <div class="row">&#8203;</div>
-
-                <div class="row">
-                    <div class="column">
-                        <button type="button" id="reset-button">Reset</button>
-                    </div>
-                </div>
+                <button type="button" id="reset-button">Reset</button>
             </form>
         </section>
+        <footer id="footer"></footer>
     </div>
-    <div id="footer"></div>
 </main>
 
-<script src="https://static.fwdekker.com/lib/template/2.x.x/template.js"></script>
+<script src="https://static.fwdekker.com/lib/template/3.x.x/template.js?v=%%VERSION_NUMBER%%"></script>
 <!--suppress HtmlUnknownTarget -->
 <script src="bundle.js?v=%%VERSION_NUMBER%%"></script>
 </body>

src/main/js/Main.ts

@@ -1,5 +1,7 @@
-// noinspection JSUnresolvedVariable
-const {$, doAfterLoad, footer, header, nav} = window.fwdekker;
+const {$, doAfterLoad} = (window as any).fwdekker;
+const {clearInputValidity, showInputInvalid, showInputValid} = (window as any).fwdekker.validation;
+
+import {DateTime} from "luxon";
 
 
 /**
@@ -8,7 +10,7 @@ const {$, doAfterLoad, footer, header, nav} = window.fwdekker;
  * @param min the lower bound of permissible values
  * @param max the upper bound of permissible values
  */
-function generateRandom(min, max) {
+function generateRandom(min: number, max: number) {
     return Math.floor(Math.random() * (max - min + 1) + min);
 }
 
@@ -17,20 +19,30 @@ function generateRandom(min, max) {
  * An input that can be validated.
  *
  * In particular, the century, year, and day inputs of the Doomsday test.
- *
- * @property input {HTMLInputElement} the input that is validatable
- * @property titleLabel {HTMLElement} the label of which to update the text
- * @property button {HTMLButtonElement} the submission button that activates validation
  */
 class ValidatableInput {
+    /**
+     * The input that is validatable.
+     */
+    readonly input: HTMLInputElement;
+    /**
+     * The label of which to update the text.
+     */
+    readonly titleLabel: HTMLElement;
+    /**
+     * The submission button that activates validation.
+     */
+    readonly button: HTMLButtonElement;
+
+
     /**
      * Constructs a new validatable input and registers event listeners.
      *
-     * @param input {HTMLInputElement} the input that is validatable
-     * @param titleLabel {HTMLElement} the label of which to update the text
-     * @param button {HTMLButtonElement} the submission button that activates validation
+     * @param input the input that is validatable
+     * @param titleLabel the label of which to update the text
+     * @param button the submission button that activates validation
      */
-    constructor(input, titleLabel, button) {
+    constructor(input: HTMLInputElement, titleLabel: HTMLElement, button: HTMLButtonElement) {
         this.input = input;
         this.titleLabel = titleLabel;
         this.button = button;
@@ -49,9 +61,7 @@ class ValidatableInput {
     /**
      * Handles the user submitting the input.
      */
-    onSubmit() {
-        this.input.dataset["entered"] = "true";
-
+    onSubmit(): void {
         if (this.isValid(this.input.value)) {
             this.showSuccess();
             this.onValidInput();
@@ -65,72 +75,58 @@ class ValidatableInput {
     /**
      * Returns `true` if and only if the input is valid.
      *
-     * This method **must** be implemented by subclasses.
+     * Returns `false` by default. Implement this method to make it do something else.
      *
-     * @param value {string} the value of the input to validate
-     * @return {boolean} `true` if and only if the input is valid
+     * @param value the value of the input to validate
+     * @return `true` if and only if the input is valid
      */
-    isValid(value) {
-        throw new Error("Implement this method.");
+    isValid(value: string): boolean {
+        return false;
     }
 
     /**
      * Runs when the user submits a valid input.
      *
-     * This method **must** be implemented by subclasses.
+     * Does nothing by default. Implement this method to make it do something.
      */
-    onValidInput() {
-        throw new Error("Implement this method.");
+    onValidInput(): void {
+        // Do nothing
     }
 
     /**
      * Runs when a user submits an invalid input.
      *
-     * This method **must** be implemented by subclasses.
+     * Does nothing by default. Implement this method to make it do something.
      */
-    onInvalidInput() {
-        throw new Error("Implement this method.");
+    onInvalidInput(): void {
+        // Do nothing
     }
 
 
     /**
      * Resets the input, title, and error message to their initial state, and removes the value from the input.
      */
-    reset() {
+    reset(): void {
         this.input.value = "";
-        this.input.dataset["entered"] = "false";
 
         this.showSuccess();
         this.updateTitle();
 
-        this.titleLabel.classList.remove("success-message");
-        this.button.classList.remove("success-box");
+        clearInputValidity(this.input);
     }
 
     /**
      * Marks the input as invalid.
      */
-    showError() {
-        this.input.setCustomValidity("Incorrect");
-
-        this.titleLabel.classList.remove("success-message");
-        this.titleLabel.classList.add("error-message");
-
-        this.button.classList.remove("success-box");
-        this.button.classList.add("error-box");
+    showError(): void {
+        showInputInvalid(this.input);
     }
 
     /**
      * Marks the input as valid.
      */
-    showSuccess() {
-        this.input.setCustomValidity("");
-
-        this.titleLabel.classList.remove("error-message");
-        this.titleLabel.classList.add("success-message");
-
-        this.button.classList.remove("error-box");
-        this.button.classList.add("success-box");
+    showSuccess(): void {
+        showInputValid(this.input);
     }
 
     /**
@@ -138,7 +134,7 @@ class ValidatableInput {
      *
      * Does nothing by default. Implement this method to make it do something.
      */
-    updateTitle() {
+    updateTitle(): void {
         // Do nothing
     }
 
@@ -146,7 +142,7 @@ class ValidatableInput {
     /**
      * Focuses the input element.
      */
-    selectInput() {
+    selectInput(): void {
         this.input.select();
     }
 }
@@ -155,46 +151,60 @@ class ValidatableInput {
  * A wrapper around a `<details>` element that persists the state in local storage.
  */
 class ToggleableSection {
+    /**
+     * The name to identify this component with in persistent storage.
+     *
+     * @private
+     */
+    private readonly name: string;
+    /**
+     * The element that can be toggled.
+     *
+     * @private
+     */
+    private readonly details: HTMLDetailsElement;
+
+
     /**
      * Constructs a new `ToggleableSection`.
      *
-     * @param name {string} the name to identify this component with in persistent storage
-     * @param details {HTMLDetailsElement} the element that can be toggled
+     * @param name the name to identify this component with in persistent storage
+     * @param details the element that can be toggled
      */
-    constructor(name, details) {
-        this._name = name;
-        this._details = details;
-        this._details.addEventListener("toggle", () => this.onToggle(this.isOpened()));
+    constructor(name: string, details: HTMLDetailsElement) {
+        this.name = name;
+        this.details = details;
+        this.details.addEventListener("toggle", () => this.onToggle(this.isOpened()));
 
-        this._loadToggle();
+        this.loadToggle();
     }
 
 
     /**
      * Returns `true` if and only if the component is currently open.
      *
-     * @return {boolean} `true` if and only if the component is currently open.
+     * @return `true` if and only if the component is currently open.
      */
-    isOpened() {
-        return !!this._details.open;
+    isOpened(): boolean {
+        return this.details.open;
     }
 
     /**
      * Opens or closes the component.
      *
-     * @param isOpened {boolean} whether to open the component
+     * @param isOpened whether to open the component
      */
-    setOpened(isOpened) {
-        this._details.open = isOpened;
+    setOpened(isOpened: boolean): void {
+        this.details.open = isOpened;
     }
 
     /**
      * This method is invoked whenever the component is toggled.
      *
-     * @param isOpened {boolean} the new state of the component
+     * @param isOpened the new state of the component
      */
-    onToggle(isOpened) {
-        this._storeToggle();
+    onToggle(isOpened: boolean): void {
+        this.storeToggle();
     }
 
 
@@ -203,8 +213,8 @@ class ToggleableSection {
      *
      * @private
      */
-    _storeToggle() {
-        localStorage.setItem(`/tools/doomsday//toggle-${this._name}`, "" + this.isOpened());
+    private storeToggle(): void {
+        localStorage.setItem(`/tools/doomsday//toggle-${this.name}`, "" + this.isOpened());
     }
 
     /**
@@ -212,11 +222,11 @@ class ToggleableSection {
      *
      * @private
      */
-    _loadToggle() {
-        const target = localStorage.getItem(`/tools/doomsday//toggle-${this._name}`);
+    private loadToggle(): void {
+        const target = localStorage.getItem(`/tools/doomsday//toggle-${this.name}`);
         if (target === null) {
             this.setOpened(true);
-            this._storeToggle();
+            this.storeToggle();
             return;
         }
 
@@ -226,16 +236,20 @@ class ToggleableSection {
 
 /**
  * A wrapper around the good ol' `Date` class that provides a bunch of useful Doomsday-specific methods.
- *
- * @property {Date} date the underlying date
  */
 class DoomsdayDate {
+    /**
+     * The underlying date.
+     */
+    readonly date: DateTime;
+
+
     /**
      * Wraps a `DoomsdayDate` around the given date.
      *
-     * @param date {Date} the date to be wrapped
+     * @param date the date to be wrapped
      */
-    constructor(date) {
+    constructor(date: DateTime) {
         this.date = date;
     }
 
@@ -243,83 +257,49 @@ class DoomsdayDate {
     /**
      * Returns the number of this `DoomsdayDate`'s century.
      *
-     * @return {number} the number of this `DoomsdayDate`'s century
+     * @return the number of this `DoomsdayDate`'s century
      */
-    getCentury() {
-        return Math.floor(this.date.getFullYear() / 100);
+    getCentury(): number {
+        return Math.floor(this.date.year / 100);
     }
 
     /**
      * Returns the day of the week of the anchor of this `DoomsdayDate`'s century.
      *
-     * @return {string} the day of the week of the anchor of this `DoomsdayDate`'s century
+     * @return the day of the week of the anchor of this `DoomsdayDate`'s century
      */
-    getCenturyAnchorString() {
-        const centuryAnchorNumber = (5 * (this.getCentury() % 4)) % 7 + 2;
-        return DoomsdayDate.getWeekDayOf(centuryAnchorNumber);
+    getCenturyAnchorString(): string {
+        return this.date.set({year: this.getCentury() * 100, month: 4, day: 4}).setLocale("en-US").weekdayLong;
     };
 
     /**
      * Returns the day of the week of the anchor day of this `DoomsdayDate`'s year.
      *
-     * @return {string} the day of the week of the anchor day of this `DoomsdayDate`'s year
+     * @return the day of the week of the anchor day of this `DoomsdayDate`'s year
      */
-    getYearAnchorString() {
-        const anchorDate = new Date(this.date);
-        anchorDate.setDate(4); // 4th
-        anchorDate.setMonth(3); // April
-        anchorDate.setHours(0); // midnight local time
-        return DoomsdayDate.getWeekDayOf(anchorDate);
+    getYearAnchorString(): string {
+        return this.date.set({month: 4, day: 4}).setLocale("en-US").weekdayLong;
     };
 
     /**
      * Returns the day of the week of this `DoomsdayDate`.
      *
-     * @return {string} the day of the week of this `DoomsdayDate`
+     * @return the day of the week of this `DoomsdayDate`
      */
-    getWeekdayString() {
-        return DoomsdayDate.getWeekDayOf(this.date);
+    getWeekdayString(): string {
+        return this.date.setLocale("en-US").weekdayLong;
     };
 
 
     /**
-     * Returns the week day of [date].
-     *
-     * @param date {Date|number} the date to get the week day of; if it is a `number`, then 0 corresponds to Sunday
-     * @return {string} the name of the week day corresponding to [date]
-     */
-    static getWeekDayOf(date) {
-        if (date instanceof Date) {
-            return date.toLocaleString("en-US", {timeZone: "GMT", weekday: "long"});
-        } else {
-            switch (date % 7) {
-                case 0:
-                    return "Sunday";
-                case 1:
-                    return "Monday";
-                case 2:
-                    return "Tuesday";
-                case 3:
-                    return "Wednesday";
-                case 4:
-                    return "Thursday";
-                case 5:
-                    return "Friday";
-                case 6:
-                    return "Saturday";
-            }
-        }
-    };
-
-    /**
-     * Returns the day of the week corresponding to the given string.
+     * Returns the day of the week corresponding to `dayString`, or an empty string if no day was recognized.
      *
      * This is a convenience method for interpreting (incomplete) user inputs.
      *
-     * @param dayString {string} the day of the week to expand
-     * @return {string} the day of the week corresponding to the given string
+     * @param dayString the day of the week to expand
+     * @return the day of the week corresponding to `dayString`, or an empty string if no day was recognized
      */
-    static expandDayString(dayString) {
+    static expandDayString(dayString: string): string {
         dayString = dayString.toLowerCase();
         if (dayString.startsWith("m"))
             return "Monday";
@@ -336,7 +316,7 @@ class DoomsdayDate {
         else if (dayString.startsWith("su"))
             return "Sunday";
         else
-            return undefined;
+            return "";
     }
 
     /**
@@ -347,50 +327,50 @@ class DoomsdayDate {
      */
     static random() {
         // TODO Give custom date range to this method
-        const minDate = new Date("0001-01-01").getTime() / 86400000;
-        const maxDate = new Date("9999-12-31").getTime() / 86400000;
-        return new DoomsdayDate(new Date(generateRandom(minDate, maxDate) * 86400000));
+        const startDate = DateTime.utc(1, 1, 1);
+        const dayRange = 9999 * 365 + (10000 / 400 * 97) - 1;
+        return new DoomsdayDate(startDate.plus({days: generateRandom(0, dayRange)}))
     }
 }
 
 
 doAfterLoad(() => {
-    // Initialize template
-    $("#nav").appendChild(nav("/Tools/Doomsday/"));
-    $("#header").appendChild(header({
-        title: "Doomsday",
-        description: `
-            Test your mastery of \
-            <a href="https://en.wikipedia.org/wiki/Doomsday_rule">&#9099; Conway's Doomsday rule</a>
-        `
-    }));
-    $("#footer").appendChild(footer({
-        vcsURL: "https://git.fwdekker.com/FWDekker/doomsday/",
-        version: "v%%VERSION_NUMBER%%"
-    }));
     $("main").classList.remove("hidden");
 
 
     // Initialize quiz
-    let quizDate;
+    let quizDate: DoomsdayDate;
 
     const centuryDetails = new class extends ToggleableSection {
-        onToggle(isOpened) {
+        onToggle(isOpened: boolean): void {
             super.onToggle(isOpened);
             if (isOpened) centuryInput.selectInput();
+            else if (yearDetails.isOpened()) yearInput.selectInput();
+            else if (dayDetails.isOpened()) dayInput.selectInput();
             centuryInput.updateTitle();
         }
     }("century", $("#century-details"));
     const yearDetails = new class extends ToggleableSection {
-        onToggle(isOpened) {
+        onToggle(isOpened: boolean): void {
             super.onToggle(isOpened);
             if (isOpened) yearInput.selectInput();
+            else if (dayDetails.isOpened()) dayInput.selectInput();
+            else if (centuryDetails.isOpened()) centuryInput.selectInput();
             yearInput.updateTitle();
         }
     }("year", $("#year-details"));
+    const dayDetails = new class extends ToggleableSection {
+        onToggle(isOpened: boolean): void {
+            super.onToggle(isOpened);
+            if (isOpened) dayInput.selectInput();
+            else if (centuryDetails.isOpened()) centuryInput.selectInput();
+            else if (yearDetails.isOpened()) yearInput.selectInput();
+            dayInput.updateTitle();
+        }
+    }("day", $("#day-details"));
 
     const centuryInput = new class extends ValidatableInput {
-        isValid(value) {
+        isValid(value: string): boolean {
             console.log("# Validate century");
             console.log(`Input:    ${value}`);
             console.log(`Expanded: ${DoomsdayDate.expandDayString(value)}`);
@@ -398,16 +378,14 @@ doAfterLoad(() => {
             return DoomsdayDate.expandDayString(value) === quizDate.getCenturyAnchorString();
         }
 
-        onValidInput() {
+        onValidInput(): void {
             this.input.value = DoomsdayDate.expandDayString(this.input.value);
             if (yearDetails.isOpened())
                 yearInput.selectInput();
-            else
+            else if (dayDetails.isOpened())
                 dayInput.selectInput();
-        }
-
-        onInvalidInput() {
-            // Do nothing
+            else
+                resetButton.focus();
         }
 
         updateTitle() {
@@ -418,7 +396,7 @@ doAfterLoad(() => {
         }
     }($("#century-input"), $("#century-title-label"), $("#century-submit"));
     const yearInput = new class extends ValidatableInput {
-        isValid(value) {
+        isValid(value: string): boolean {
             console.log("# Validate year");
             console.log(`Input:    ${value}`);
             console.log(`Expanded: ${DoomsdayDate.expandDayString(value)}`);
@@ -428,22 +406,21 @@ doAfterLoad(() => {
 
         onValidInput() {
             this.input.value = DoomsdayDate.expandDayString(this.input.value);
-            dayInput.selectInput();
-        }
-
-        onInvalidInput() {
-            // Do nothing
+            if (dayDetails.isOpened())
+                dayInput.selectInput();
+            else
+                resetButton.focus();
         }
 
         updateTitle() {
             if (yearDetails.isOpened())
-                this.titleLabel.innerText = `Doomsday of year ${quizDate.date.getFullYear()}?`;
+                this.titleLabel.innerText = `Doomsday of year ${quizDate.date.year}?`;
             else
                 this.titleLabel.innerText = `Year`;
         }
     }($("#year-input"), $("#year-title-label"), $("#year-submit"));
     const dayInput = new class extends ValidatableInput {
-        isValid(value) {
+        isValid(value: string): boolean {
             console.log("# Validate day");
             console.log(`Input:    ${value}`);
             console.log(`Expanded: ${DoomsdayDate.expandDayString(value)}`);
@@ -456,12 +433,11 @@ doAfterLoad(() => {
             resetButton.focus();
         }
 
-        onInvalidInput() {
-            // Do nothing
-        }
-
         updateTitle() {
-            this.titleLabel.innerText = `Weekday of ${quizDate.date.toISOString().substr(0, 10)}?`;
+            if (dayDetails.isOpened())
+                this.titleLabel.innerText = `Weekday of ${quizDate.date.toISODate()}?`;
+            else
+                this.titleLabel.innerText = `Day`;
         }
     }($("#day-input"), $("#day-title-label"), $("#day-submit"));
 
@@ -479,7 +455,7 @@ doAfterLoad(() => {
     function reloadQuiz() {
         quizDate = DoomsdayDate.random();
         console.log("# Reset");
-        console.log(`New date:  ${quizDate.date.toISOString().substr(0, 10)}`);
+        console.log(`New date:  ${quizDate.date.toISODate()}`);
         console.log(`           ${quizDate.date}`);
         console.log(`Century#:  ${quizDate.getCentury()}`);
         console.log(`Century:   ${quizDate.getCenturyAnchorString()}`);
@@ -493,8 +469,10 @@ doAfterLoad(() => {
             centuryInput.selectInput();
         else if (yearDetails.isOpened())
             yearInput.selectInput();
-        else
+        else {
+            dayDetails.setOpened(true);
             dayInput.selectInput();
+        }
     }
 
     // Let the fun begin

tsconfig.json

@@ -0,0 +1,11 @@
+{
+    "compilerOptions": {
+        "target": "es6",
+        "strict": true,
+        "rootDir": "./src/main/js/",
+        "outDir": "./dist/js/"
+    },
+    "include": [
+        "src/main/js/**/*.ts"
+    ]
+}