4 files changed, 73 insertions, 0 deletions
diff --git a/src/app.d.ts b/src/app.d.ts
new file mode 100644
index 0000000..da08e6d
--- /dev/null
+++ b/src/app.d.ts
@@ -0,0 +1,13 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};
diff --git a/src/app.html b/src/app.html
new file mode 100644
index 0000000..77a5ff5
--- /dev/null
+++ b/src/app.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>
diff --git a/src/lib/index.ts b/src/lib/index.ts
new file mode 100644
index 0000000..856f2b6
--- /dev/null
+++ b/src/lib/index.ts
@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
new file mode 100644
index 0000000..3519725
--- /dev/null
+++ b/src/routes/+page.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+    import { DateTime } from "luxon";
+
+    const getCurrentYear = () => DateTime.now().year;
+    const getRelative = (year) =>
+        DateTime.local(year).toRelative({ locale: "en" });
+
+    let year = $state(getCurrentYear());
+    let sqrt = $derived(year ** 0.5);
+    let isPerfectSquare = $derived(Number.isInteger(sqrt));
+    let lastSqrt = $derived(isPerfectSquare ? sqrt - 1 : Math.floor(sqrt));
+    let nextSqrt = $derived(isPerfectSquare ? sqrt + 1 : Math.ceil(sqrt));
+    let last = $derived(lastSqrt ** 2);
+    let next = $derived(nextSqrt ** 2);
+    let nextRelative = $state(getRelative(next));
+
+    setInterval(() => {
+        year = getCurrentYear();
+        nextRelative = getRelative(next);
+    }, 500);
+</script>
+
+<div id="container">
+    {#if isPerfectSquare}
+        <div id="answer">Yes.</div>
+        <strong>{sqrt}</strong><sup>2</sup> = {year}.
+    {:else}
+        <div id="answer">No.</div>
+    {/if}
+    The last was
+    <ruby>{last}<rp> (</rp><rt>{lastSqrt}<sup>2</sup></rt><rp>)</rp></ruby>, and
+    the next is
+    <ruby>{next}<rp> (</rp><rt>{nextSqrt}<sup>2</sup></rt><rp>)</rp></ruby>, {nextRelative}!
+</div>
+
+<style>
+    #container {
+        text-align: center;
+        font-size: 2rem;
+    }
+    #answer {
+        font-size: 5em;
+        margin: 0;
+        font-weight: bold;
+        font-family: sans-serif;
+    }
+</style>