forked from tools/doomsday
213 lines
7.3 KiB
HTML
213 lines
7.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta name="author" content="Felix W. Dekker" />
|
|
<meta name="application-name" content="Converter" />
|
|
<meta name="description" content="Converts numbers to and from various bases." />
|
|
<meta name="theme-color" content="#0033cc" />
|
|
|
|
<title>Doomsday | FWDekker</title>
|
|
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic"
|
|
crossorigin="anonymous" />
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
|
|
integrity="sha256-l85OmPOjvil/SOvVt3HnSSjzF1TUMyT9eV0c2BzEGzU=" crossorigin="anonymous" />
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.3.0/milligram.min.css"
|
|
integrity="sha256-Ro/wP8uUi8LR71kwIdilf78atpu8bTEwrK5ZotZo+Zc=" crossorigin="anonymous" />
|
|
<link rel="stylesheet" href="https://static.fwdekker.com/css/milligram-common.css" crossorigin="anonymous" />
|
|
<style>
|
|
.invisible {
|
|
display: none;
|
|
}
|
|
|
|
input[data-entered=true]:valid {
|
|
background-color: green;
|
|
}
|
|
|
|
input[data-entered=true]:invalid {
|
|
background-color: red;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="wrapper">
|
|
<!-- Header -->
|
|
<header class="header">
|
|
<section class="container">
|
|
<h1>Doomsday</h1>
|
|
<blockquote>
|
|
<p><em>
|
|
Test your mastery of <a href="https://en.wikipedia.org/wiki/Doomsday_rule">Conway's Doomsday</a>
|
|
rule.
|
|
</em></p>
|
|
</blockquote>
|
|
</section>
|
|
</header>
|
|
|
|
|
|
<!-- Input -->
|
|
<section class="container">
|
|
<form>
|
|
<label for="century" id="century-label">Century</label>
|
|
<input type="text" id="century" autocomplete="off" autofocus /> <!--list="weekdays"-->
|
|
<span class="invisible" id="century-error">Error message</span>
|
|
|
|
<label for="year" id="year-label">Year</label>
|
|
<input type="text" id="year" autocomplete="off" />
|
|
<span class="invisible" id="year-error">Error message</span>
|
|
|
|
<label for="day" id="day-label">Day</label>
|
|
<input type="text" id="day" autocomplete="off" />
|
|
<span class="invisible" id="day-error">Error message</span>
|
|
|
|
|
|
<!-- <datalist id="weekdays">-->
|
|
<!-- <option value="Monday">-->
|
|
<!-- <option value="Tuesday">-->
|
|
<!-- <option value="Wednesday">-->
|
|
<!-- <option value="Thursday">-->
|
|
<!-- <option value="Friday">-->
|
|
<!-- <option value="Saturday">-->
|
|
<!-- <option value="Sunday">-->
|
|
<!-- </datalist>-->
|
|
</form>
|
|
</section>
|
|
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<section class="container">
|
|
Made by <a href="https://fwdekker.com/">Felix W. Dekker</a>.
|
|
Licensed under the
|
|
<a href="https://git.fwdekker.com/FWDekker/doomsday/src/branch/master/LICENSE">MIT License</a>.
|
|
Source code available on <a href="https://git.fwdekker.com/FWDekker/doomsday/">git</a>.
|
|
</section>
|
|
</footer>
|
|
</main>
|
|
|
|
|
|
<!-- Scripts -->
|
|
<script src="https://static.fwdekker.com/js/common.js" crossorigin="anonymous"></script>
|
|
<script>
|
|
// rand in range [min, max] (both inclusive)
|
|
const random = function (min, max) {
|
|
return Math.floor((Math.random() * (max - min + 1)) + min);
|
|
};
|
|
|
|
// generate date in range [0001-01-01, 9999-12-31]
|
|
const generateDate = function () {
|
|
const minDate = new Date("0001-01-01").getTime() / 86400000;
|
|
const maxDate = new Date("9999-12-31").getTime() / 86400000;
|
|
return new Date(random(minDate, maxDate) * 86400000);
|
|
};
|
|
|
|
const dayNumberToWeekDay = function (dayNumber) {
|
|
switch (dayNumber) {
|
|
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";
|
|
}
|
|
};
|
|
|
|
const centuryToAnchor = function (century) { // century is e.g. 1900 or 19, doesn't really matter since it's mod
|
|
return dayNumberToWeekDay((5 * (century % 4)) % 7 + 2);
|
|
};
|
|
|
|
const yearToAnchor = function (year) {
|
|
return dayNumberToWeekDay((new Date("" + year + "-04-04")).getDay());
|
|
};
|
|
|
|
|
|
const showError = function (input, errorLabel) {
|
|
|
|
};
|
|
|
|
|
|
doAfterLoad(() => {
|
|
const centuryInput = $("#century");
|
|
const centuryLabel = $("#century-label");
|
|
const yearInput = $("#year");
|
|
const yearLabel = $("#year-label");
|
|
const dayInput = $("#day");
|
|
const dayLabel = $("#day-label");
|
|
|
|
let quizDate;
|
|
|
|
|
|
const reloadQuiz = function () {
|
|
centuryInput.dataset["entered"] = "false";
|
|
centuryInput.value = "";
|
|
yearInput.dataset["entered"] = "false";
|
|
yearInput.value = "";
|
|
dayInput.dataset["entered"] = "false";
|
|
dayInput.value = "";
|
|
|
|
quizDate = generateDate();
|
|
centuryLabel.innerText = Math.floor(quizDate.getFullYear() / 100) * 100;
|
|
yearLabel.innerText = quizDate.getFullYear();
|
|
dayLabel.innerText = quizDate.toISOString().substr(0, 10);
|
|
|
|
centuryInput.select();
|
|
|
|
console.log(centuryToAnchor(Math.floor(quizDate.getFullYear() / 100)));
|
|
console.log(yearToAnchor(quizDate.getFullYear()));
|
|
console.log(dayNumberToWeekDay(quizDate.getDay()));
|
|
};
|
|
reloadQuiz();
|
|
|
|
|
|
centuryInput.addEventListener("keydown", event => {
|
|
if (event.key === "Enter") {
|
|
centuryInput.dataset["entered"] = "true";
|
|
if (centuryInput.value === centuryToAnchor(Math.floor(quizDate.getFullYear() / 100))) {
|
|
centuryInput.setCustomValidity("");
|
|
yearInput.select();
|
|
} else {
|
|
centuryInput.setCustomValidity("Wrong day");
|
|
centuryInput.select();
|
|
}
|
|
}
|
|
});
|
|
|
|
yearInput.addEventListener("keydown", event => {
|
|
if (event.key === "Enter") {
|
|
yearInput.dataset["entered"] = "true";
|
|
if (yearInput.value === yearToAnchor(quizDate.getFullYear())) {
|
|
yearInput.setCustomValidity("");
|
|
dayInput.select();
|
|
} else {
|
|
yearInput.setCustomValidity("Wrong day");
|
|
yearInput.select();
|
|
}
|
|
}
|
|
});
|
|
|
|
dayInput.addEventListener("keydown", event => {
|
|
if (event.key === "Enter") {
|
|
dayInput.dataset["entered"] = "true";
|
|
if (dayInput.value === dayNumberToWeekDay(quizDate.getDay())) {
|
|
reloadQuiz();
|
|
} else {
|
|
dayInput.setCustomValidity("Wrong day");
|
|
dayInput.select();
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|