forked from tools/doomsday
Add initial semi-working code
This commit is contained in:
commit
99b8044b10
GPG Key ID:
B1B567AF58D6EE0F
|
|
@ -0,0 +1,11 @@
|
|||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
|
||||
indent_style = space
|
||||
indent_size = 4
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) 2020 Felix 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
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
|
@ -0,0 +1,212 @@
|
|||
<!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>
|
||||
Loading…
Reference in New Issue