collin/collinenlucy.nl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adding a countdown to the homepage

Browse source
This commit is contained in:
collin 2026-03-23 14:46:56 +01:00
parent 7742bf21bf
commit 7146046ee0
No known key found for this signature in database
2 changed files with 67 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
client/index.html
View file

@ -1,9 +1,11 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<head>
<link rel="stylesheet" type="text/css" href="/style.css"> <link rel="stylesheet" type="text/css" href="/style.css">
</head> </head>
<body>
<body>
<h1 class="title fontXL textCenter backgroundLightGreen colorWhite">Collin and Lucy's Wedding</h1> <h1 class="title fontXL textCenter backgroundLightGreen colorWhite">Collin and Lucy's Wedding</h1>
<div class="contents fontM"> <div class="contents fontM">
<a class="rsvpButton backgroundLightGreen hidden" href="/rsvp"> <a class="rsvpButton backgroundLightGreen hidden" href="/rsvp">
@ -16,8 +18,11 @@
<div> <div>
<h2 class="textLeft fontL colorLightGreen">When?</h2> <h2 class="textLeft fontL colorLightGreen">When?</h2>
<p>Saturday 16th of May 2026</p> <p>Saturday 16th of May 2026</p>
<b>
<p id="countdown"></p>
</b>
<br/> <br />
<h3 class="colorLightGreen fontM">Agenda</h3> <h3 class="colorLightGreen fontM">Agenda</h3>
<ul> <ul>
@ -27,21 +32,26 @@
<li>18:30 - Dinner</li> <li>18:30 - Dinner</li>
</ul> </ul>
<br/> <br />
<h2 class="textLeft colorLightGreen fontL">Where?</h2> <h2 class="textLeft colorLightGreen fontL">Where?</h2>
<a href="https://www.broekerhuis.nl/"> <a href="https://www.broekerhuis.nl/">
<p> <p>
Het Broeker Huis <br/> Het Broeker Huis <br />
Leeteinde 16 <br/> Leeteinde 16 <br />
1151AK Broek in Waterland 1151AK Broek in Waterland
</p> </p>
</a> </a>
<br/> <br />
<iframe class="map" src="https://www.openstreetmap.org/export/embed.html?bbox=4.991877973079682%2C52.436195297048144%2C4.994031786918641%2C52.43801523045145&amp;layer=mapnik&amp;marker=52.43710609072568%2C4.992956221103668" style="border: 1px solid black"></iframe><br/> <iframe class="map"
<a href="https://www.openstreetmap.org/node/2869212621"><h5 class="fontS">Open Map</h5></a> src="https://www.openstreetmap.org/export/embed.html?bbox=4.991877973079682%2C52.436195297048144%2C4.994031786918641%2C52.43801523045145&amp;layer=mapnik&amp;marker=52.43710609072568%2C4.992956221103668"
style="border: 1px solid black"></iframe><br />
<a href="https://www.openstreetmap.org/node/2869212621">
<h5 class="fontS">Open Map</h5>
</a>
</div> </div>
</div> </div>
<script src="/index.js"></script> <script src="/index.js"></script>
</body> </body>
</html> </html>

17
client/index.js
View file

@ -8,10 +8,27 @@ function hasRsvped() {
return cookies[COOKIE_NAME] === "true"; return cookies[COOKIE_NAME] === "true";
} }
function padTime(t) {
return `${t}`.padStart(2, '0');
}
function updateCountdown() {
const countdownDate = new Date("2026-05-16T14:30:00.000+02:00");
const now = new Date();
const msRemaining = countdownDate.getTime() - now.getTime();
const daysRemaining = Math.floor(msRemaining / (1000 * 60 * 60 * 24));
const hoursRemaining = Math.floor(msRemaining / (1000 * 60 * 60)) % 24;
const minutesRemaining = Math.floor(msRemaining / (1000 * 60)) % 60;
const secondsRemaining = Math.floor(msRemaining / 1000) % 60;
const countdownNode = document.getElementById("countdown");
countdownNode.innerText = `${daysRemaining} days ${padTime(hoursRemaining)}:${padTime(minutesRemaining)}:${padTime(secondsRemaining)}`;
}
window.onload = function () { window.onload = function () {
if (!hasRsvped()) { if (!hasRsvped()) {
const rsvpButton = document.querySelector(".rsvpButton"); const rsvpButton = document.querySelector(".rsvpButton");
rsvpButton.classList.remove("hidden"); rsvpButton.classList.remove("hidden");
} }
updateCountdown();
window.setInterval(updateCountdown, 500);
}; };