mirror of
https://github.com/LucasVbr/notion-widgets.git
synced 2026-05-13 17:21:55 +00:00
Lucàs
42 lines
1.3 KiB
Plaintext
42 lines
1.3 KiB
Plaintext
---
|
|
|
|
import Layout from '../../layouts/Layout.astro';---
|
|
|
|
<Layout title="Countdown">
|
|
<main class="w-screen h-screen flex flex-col justify-center items-center">
|
|
<h2 id="title" class="text-center text-xl font-bold"></h2>
|
|
<h3 id="display"></h3>
|
|
</main>
|
|
</Layout>
|
|
|
|
<script lang="ts" is:inline>
|
|
const titleElement = document.getElementById("title");
|
|
const displayElement = document.getElementById("display");
|
|
|
|
const queryString = window.location.search
|
|
const urlParams = new URLSearchParams(queryString);
|
|
const titleParam = urlParams.get("title");
|
|
const datetimeParam = urlParams.get("datetime");
|
|
|
|
titleElement.innerText = titleParam;
|
|
const date = new Date(datetimeParam)
|
|
|
|
const interval = setInterval(() => {
|
|
const now = new Date()
|
|
const diff = Math.abs(date.getTime() - now.getTime());
|
|
if (diff <= 0) clearInterval(interval);
|
|
|
|
const days = Math.floor(diff / (1000 * 3600 * 24))
|
|
const hours = Math.floor(diff / (1000 * 3600)) % 24
|
|
const minutes = Math.floor(diff / (1000 * 60)) % 60
|
|
const seconds = Math.floor(diff / (1000)) % 60
|
|
|
|
const display = []
|
|
if (days > 0) display.push(`${days}d`)
|
|
if (hours > 0) display.push(`${hours}h`)
|
|
if (minutes > 0) display.push(`${minutes}m`)
|
|
if (seconds > 0) display.push(`${seconds}s`)
|
|
|
|
displayElement.innerText = display.join(" ");
|
|
}, 1000)
|
|
</script> |