55 lines
1.2 KiB
Svelte
55 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
|
|
let now = $state<Date | null>(null);
|
|
|
|
onMount(() => {
|
|
now = new Date();
|
|
const timer = setInterval(() => (now = new Date()), 15000);
|
|
return () => clearInterval(timer);
|
|
});
|
|
|
|
function formatClock(date: Date): string {
|
|
const weekday = date.toLocaleDateString('en-US', { weekday: 'long' });
|
|
const day = date.toLocaleDateString('en-US', { day: '2-digit' });
|
|
const month = date.toLocaleDateString('en-US', { month: 'long' });
|
|
const time = date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false });
|
|
return `${weekday} ${day} ${month} ${time}`;
|
|
}
|
|
</script>
|
|
|
|
<span class="clock full">{now ? formatClock(now) : ''}</span>
|
|
<span class="clock short">{now ? formatClock(now).split(' ').slice(1).join(' ') : ''}</span>
|
|
<span class="clock time-only">{now ? formatClock(now).split(' ').at(-1) : ''}</span>
|
|
|
|
<style>
|
|
.clock {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.short,
|
|
.time-only {
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.full {
|
|
display: none;
|
|
}
|
|
|
|
.short {
|
|
display: inline;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 420px) {
|
|
.short {
|
|
display: none;
|
|
}
|
|
|
|
.time-only {
|
|
display: inline;
|
|
}
|
|
}
|
|
</style>
|