NickBland/website-2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add in Graduation Countdown

Browse Source
This commit is contained in:
Nick Bland 2024-04-12 23:01:03 +10:00
parent 15f17daada
commit 8e56b372c4
Signed by: NickBland
GPG Key ID: 31CADD9E5FDD798C
2 changed files with 81 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
src/components/countdown.svelte Normal file
View File

@ -0,0 +1,75 @@
<script lang="ts">
import { onMount } from "svelte";
const GRADUATION = new Date(1753797600000).valueOf();
let interval: NodeJS.Timer;
let timeTo = Math.abs(GRADUATION - Date.now().valueOf()) / 1000;
// Calculate time remaining from milliseconds to graduation (30 Jul, 2025)
$: years = Math.floor(timeTo / 31556926);
$: months = Math.floor(timeTo / 2629743) % 12;
$: days = Math.floor(timeTo / 86400) % 30;
$: hours = Math.floor(timeTo / 3600) % 24;
$: minutes = Math.floor(timeTo / 60) % 60;
$: seconds = Math.floor(timeTo % 60);
// Update the timeTo variable every 1000 milliseconds
// Don't go past 0 though! Stop the updates afterwards
function update() {
timeTo = (GRADUATION - Date.now().valueOf()) / 1000;
if (timeTo <= 0) {
clearInterval(interval);
timeTo = 0;
}
}
onMount(() => {
// Create a timer
interval = setInterval(update, 1000);
return () => {
clearInterval(interval);
};
});
</script>
<h3 class="p-5 text-4xl text-center">Time to Graduation</h3>
<div class="grid grid-flow-col gap-5 text-center auto-cols-max justify-center">
<div class="flex flex-col">
<span class="countdown font-mono text-5xl">
<span style="--value:{years};"></span>
</span>
years
</div>
<div class="flex flex-col">
<span class="countdown font-mono text-5xl">
<span style="--value:{months};"></span>
</span>
months
</div>
<div class="flex flex-col">
<span class="countdown font-mono text-5xl">
<span style="--value:{days};"></span>
</span>
days
</div>
<div class="flex flex-col">
<span class="countdown font-mono text-5xl">
<span style="--value:{hours};"></span>
</span>
hours
</div>
<div class="flex flex-col">
<span class="countdown font-mono text-5xl">
<span style="--value:{minutes};"></span>
</span>
minutes
</div>
<div class="flex flex-col">
<span class="countdown font-mono text-5xl">
<span style="--value:{seconds};"></span>
</span>
seconds
</div>
</div>

8
src/routes/portfolio/+page.svelte
View File

@ -1,12 +1,13 @@
<script>
import Divider from "../../components/divider.svelte";
import Countdown from "../../components/countdown.svelte";
</script>
<div
class="hero height-minus-nav bg-gradient-to-br from-primary from-10% to-accent to-80%"
>
<div class="hero-overlay bg-opacity-30"></div>
<div class="hero-content text-left text-neutral-content flex-col lg:flex-row">
<div class="hero-content text-left text-accent-content flex-col lg:flex-row">
<div class="skeleton w-48 h-64 shadow-2xl max-w-sm"></div>
<div>
<h1 class="mb-6 text-6xl font-bold">
@ -17,7 +18,7 @@
neat things.
</p>
</div>
<div class="hidden md:flex divider divider-horizontal divider-start">
<div class="hidden lg:flex divider divider-horizontal divider-start">
Scoll
</div>
</div>
@ -35,3 +36,6 @@
</p>
<Divider />
<h1 class="my-6 text-6xl text-center text-base-content font-bold">Education</h1>
<Countdown />